AngularJS - 给复选框一个整数？

Question

我能够看到true或false并在复选框中使用ng-true-value和ng-false-value返回字符串,但另外,我想给复选框一个整数,如果选中它,它会返回一个整数.

这应该类似于从selectbox获取值时:http://jsfiddle.net/PuDRm/

但我似乎无法在复选框中获得相同的想法:http://jsfiddle.net/PuDRm/1/

<input type="checkbox" ng-model="testc" ng-true-value="Yes" ng-false-value="No" ng-change="processtest()" /> Yes

我是一个新手,并试图了解AngularJS.

Answer 1

听起来你正试图用复选框绑定到两个单独的值.

在选择中,视图是您给出的名称,例如'test1',模型是数字,例如'1'.对于复选框,视图是一个支票或空白方块,模型为是/否(或者您想要放入ng-true-value和中的任何内容ng-false-value).没有空间让它产生一个数字.

通过省略ng-true-value和ng-false-value属性,将复选框模型设置为默认(布尔)类型会更简单.然后,您可以在此更新的小提琴中显示数字和文本:http://jsfiddle.net/D5DGf/1/

该{{ ... }}绑定照顾时,函数值变化更新的,所以你不需要使用ng-change任何.

原来的复选框小提琴出了什么问题？

在processtest您正在使用模型的功能中(是/否)并将其更改为始终为8或1.复选框(实际上ngModel)不理解这一点,因为它总是看到是/否.由于它不知道该怎么做,它可以回归到未经检查.

这就是原始小提琴中的复选框无法检查的原因.

Answer 2

如果您仍想为模型和checbox值设置使用数字,则可以使用自定义指令将字符串解析回整数.

演示: http ://jsfiddle.net/qw5zS/

HTML

<input type="checkbox" ng-model="test" parse-int ng-true-value="1" ng-false-value="0" /> 

JS

app.directive('parseInt', [function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, controller) {
            controller.$formatters.push(function (modelValue) {
                console.log('model', modelValue, typeof modelValue);
                return '' + modelValue;
            });

            controller.$parsers.push(function (viewValue) {
                console.log('view', viewValue, typeof viewValue);
                return parseInt(viewValue,10);
            });
        }
    }
} ])

但这可能不是一个使用复选框的好习惯,你应该保持默认行为并使用布尔值,然后按照你想要的格式化视图,但要保持数据清洁.

Answer 3

如果将数据库中的列从整数更改为char,则可以使用

<input type="checkbox" ng-model="testc" ng-true-value="1" ng-false-value="0" ng-change="processtest()" /> Yes