web-dev-qa-db-ja.com

ngTrueValueとngFalseValueを数値に設定する

Update：質問は最新のものではありません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 demo ）

私はすべての種類のバリエーションを試しました：

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

それらのどれも動作しません。どうすればangular引数を数値として扱うことができますか？

angularjscheckboxangular-ngmodel
35
AlexFoxGill

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 [〜＃〜]

66
Satpal

私はそのためのディレクティブを作成しましたが、うまくいくようです：

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 [〜＃〜]

6
karaxuna

HTML属性にはタイプがありません。文字列以外は何も含めることができないため、常に文字列になります。物語の終わり。

HTML属性で1と"1"を区別することはできません。 Angularはそれに追随するため、文字列のみが機能します。

1
TheHippo

上記の最初のアプローチは素晴らしいです。それはうまくいきます。動的モデルを使用する必要がある場合は、ng-changeディレクティブを使用することもできます（たとえば、IDまたは番号とリンク-IDを使用したい場合は、先に知りません）。モデルをパラメーターとして渡すだけです：ng-change = "fooBar（model [ID]）"、コントローラー関数をキャッチし、Number（model [ID]）再入力を使用します。これはtrueを1に、falseを0に変換し、これで作業できます。

0
Newman