Установка параметров ngTrueValue и ngFalseValue

Я привязал флажок к значению:

<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 demo)

Я пробовал всевозможные варианты:

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

Ни один из них не работает. Как я могу сделать angular рассматривать аргументы как число?

Ответы

Ответ 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

Ответ 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);
      });
    }
  };
}]);

Использование:

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

DEMO

Ответ 3

У атрибутов HTML нет каких-либо типов. Они не могут содержать ничего другого, затем строку, поэтому она всегда является строкой. Конец истории.

Вы не можете различать между 1 и "1" в атрибуте HTML. Angular пытается идти в ногу с этим, поэтому будут работать только строки.

Ответ 4

Первый подход выше - это здорово. Это прекрасно работает. Вы также можете использовать директиву ng-change, если вам нужна динамическая модель (например, связанная с идентификатором или номером), если вы хотите работать с ID, которого вы не знаете заранее). Просто передайте модель в качестве параметра: ng-change = "fooBar (model [ID])", поймайте в функции контроллера и повторите тип Number (model [ID]). Это преобразует true как 1, false как 0, и вы можете работать с этим.