17

我能够看到真或假，并在带有 ng-true-value 和 ng-false-value 的复选框中返回字符串，但另外，我想给复选框一个整数，如果它被选中，它会返回一个整数。

这应该类似于我从选择框中获取值时：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。

4

6 回答 6

14

听起来您正在尝试使用复选框绑定到两个单独的值。

在选择中，视图是您给的名称，例如“test1”，型号是数字，例如“1”。对于复选框，视图是一个检查或一个空白方块，模型是是/否（或任何你想放在 and 中的东西ng-true-value）ng-false-value。没有空间让它也产生一个数字。

ng-true-value通过省略andng-false-value属性让复选框模型成为默认（布尔）类型会更简单。然后，您可以在此更新的小提琴中显示基于此的数字和文本：http: //jsfiddle.net/D5DGf/1/

当{{ ... }}函数值更改时，绑定会负责更新，因此您不需要使用ng-change任何一个。

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

在processtest函数中，您使用模型（是/否）并将其更改为始终为8或1。复选框（实际上是ngModel）不理解这一点，因为它希望始终看到是/否。由于它不知道该做什么，它会退回到不受检查的状态。

这就是为什么原始小提琴中的复选框无法选中的原因。

于 2013-10-15T00:40:22.877 回答
9

如果您仍想为您的模型和复选框值设置使用数字，您可以使用自定义指令将字符串解析回整数。

演示：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);
            });
        }
    }
} ])

但这可能不是使用复选框的好习惯，您应该保持默认行为并使用布尔值，然后按照您的需要格式化视图，但要保持数据干净。

于 2013-10-15T00:47:47.877 回答
6

如果将数据库中的列从整数更改为字符，它适用于 

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

于 2014-09-10T12:30:29.860 回答
2

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

<input type="checkbox"
   ng-true-value="{{ 1 | json }}" ng-false-value="{{ 0 | json }}"
   ng-model="myVariable">
于 2018-08-31T15:20:54.953 回答
1

另一种不需要 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>
于 2014-10-31T10:49:50.503 回答
0

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

例子：

$scope.status = ($scope.status === 1 ? true : false);
于 2015-04-12T21:44:16.877 回答