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

Answer 4

另一种不需要ng-model，ng-true-value和ng-false-value的方法。让我们保持原样。

<强> JS

angular.module('whateverModule')
    .directive('toggleInt', function () {
        function link ($scope, $element, attr) {
            $element.on('click', function () {
                $scope.$apply(function() {
                    $scope.toggleModel = +!$scope.toggleModel;
                });
            });

            $scope.$watch('toggleModel', function (value) {
                $element.prop('checked', !!value);
            });
        }

        return {
            restrict: 'A',
            scope: {
                toggleModel: '='
            },
            link: link
        };
    });

<强> HTML

<input type="checkbox" toggle-int toggle-model="intModel">
<span>Value: {{intModel}}</span>

Answer 5

这是在我的试验中效果最好的解决方案：

<input type="checkbox"
   ng-true-value="{{ 1 | json }}" ng-false-value="{{ 0 | json }}"
   ng-model="myVariable">

Answer 6

我最终做的只是在控制器上使用if语句。

示例：

$scope.status = ($scope.status === 1 ? true : false);

AngularJS - 给复选框一个整数？

6 个答案: