将ngTrueValue和ngFalseValue设置为数字

Question

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

---

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

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

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

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

但是,最初复选框似乎未选中.如果我将$scope.checkboxto 的初始值更改为"1",则确实如此.(jsfiddle演示)

我尝试了各种变化:

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

他们都没有工作.如何将参数作为数字进行角度处理？

Answer 1

您可以使用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);

DEMO

Answer 2

我为此创建了指令,似乎工作正常:

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" />

DEMO