36

更新：对于最新的 Angular 版本，问题已过时，请参阅 tsh 对此帖子的评论

我已将复选框绑定到一个值：

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

复选框的值在控制器中设置为 1：

function Controller($scope) {
    $scope.checkbox = 1
}

但是，最初该复选框并未显示为选中状态。如果我将初始值更改$scope.checkbox为"1"，它确实如此。（jsfiddle 演示）

我尝试了各种变化：

ng-true-value="{{1}}"
ng-true-value="{{Number(1)}}"
ng-true-value="{{parseInt('1')}}"

它们都不起作用。如何使角度将参数视为数字？

4

4 回答 4

67

您可以使用ngChecked，如果表达式为真，则将在元素上设置特殊属性“checked”

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

您可以使用$scope.$watch将其转换为数字

$scope.$watch(function(){
    return $scope.checkbox;
}, function(){
    $scope.checkbox = Number($scope.checkbox);
    console.log($scope.checkbox, typeof $scope.checkbox);
},true);

演示

于 2014-01-17T18:11:30.620 回答
6

我为此创建了指令，似乎工作正常：

angular.module('app').directive('cdTrueValue', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(v){
        return v ? scope.$eval(attrs.cdTrueValue) : scope.$eval(attrs.cdFalseValue);
      });

      ngModel.$formatters.push(function(value) {
          return value === scope.$eval(attrs.cdTrueValue);
      });
    }
  };
}]);

用法：

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

演示

于 2015-03-04T22:09:34.603 回答
1

HTML 属性没有任何类型。它们不能包含其他任何东西，然后是一个字符串，所以它始终是一个字符串。故事结局。

您无法区分HTML 属性中的1和中的属性。"1"Angular 试图跟上这一点，所以只有字符串才能工作。

于 2014-01-17T18:06:34.060 回答
0

上面的第一种方法很棒。这很好用。如果您需要使用动态模型（例如与 ID 或数字链接 - 如果您想使用您不知道的 ID），您也可以使用 ng-change 指令。只需将模型作为参数传递： ng-change="fooBar(model[ID])" ，捕获控制器函数并使用 Number(model[ID]) 重新输入。将 true 转换为 1，将 false 转换为 0，您可以使用它。

于 2015-12-12T22:15:33.677 回答