設置ngTrueValue和ngFalseValue爲數字

更新：問題已經過時了最新的角版本，看到這個帖子設置ngTrueValue和ngFalseValue爲數字

我已綁定一個複選框的值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')}}"

他們沒有工作。我怎樣才能使角度作爲一個數字對待參數？

來源

2014-01-17 AlexFoxGill

對不起，我應該增加更多...再次檢查 –

如果您更改範圍選擇爲'1'，它將工作。 http://jsfiddle.net/fergnab/wfefmyex/1/ – Fergus

關於新來者的通知：由於'ng-true-value'已被更改爲一個表達式，因此此問題已過時，並且所有內容都應按預期的OP運行更新（但不是很新）的角度版本。 [的jsfiddle]（https：//開頭的jsfiddle。net/m3pbb77h /） – tsh

您可以使用ngChecked，如果表達式爲truthy，然後在「檢查」的特殊屬性將元素

<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

來源

2014-01-17 18:11:30 Satpal

您不需要使用此方法的ng-true-value或ng-false-value – Rob

@Rob，但您需要將值設置爲 – Satpal

您的權利，我的錯。 – Rob

HTML屬性沒有任何類型。它們不能包含任何其他內容，然後是一個字符串，所以它總是一個字符串。故事結局。

您不能在HTML屬性中區分1和"1"之間。 Angular試圖跟上這一點，所以只有字符串會起作用。

來源

2014-01-17 18:06:34 TheHippo

'' – Dementic

我爲此創建了指令，似乎工作正常：

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

來源

2015-03-04 22:09:34 karaxuna

第一種方法上面是巨大的。這很好。如果您需要使用動態模型（例如，使用ID或編號鏈接 - 如果您想要使用不知道的ID），還可以使用ng-change指令。只需將模型作爲參數傳遞：ng-change =「fooBar（model [ID]）」，捕獲控制器函數並使用Number（model [ID]）重新鍵入。這是真正的1，錯誤爲0，你可以用這個工作。

來源

2015-12-12 22:15:33 Newman

設置ngTrueValue和ngFalseValue爲數字

回答

相關問題