如何使用Angular.js檢查複選框時如何設置輸入字段值

Question

我需要一個幫助。我需要當我檢查複選框時，相應的輸入字段將具有所需的值。讓我在下面解釋我的代碼。

<label class="checkbox-inline"> 
    <input type="checkbox" name="favoriteColors"> Five 
</label> 
<label class="checkbox-inline"> 
    <input type="checkbox" name="favoriteColors"> Ten 
</label> 
<input type="text" name="color" id="clr" ng-model="color" readonly /> 

我需要在這裏當用戶將檢查Five輸入字段會得到5，當用戶將檢查Ten，輸入字段值將10。請幫助我。

Answer 1

我想也許你打算使用電臺而不是複選框（因爲顏色可以是5或10）。 這裏是一個工作plnkr。

和代碼：

<label class="checkbox-inline"> 
    <input type="radio" name="favoriteColors" ng-model="data.color" value="5"> Five 
</label> 
<label class="checkbox-inline"> 
    <input type="radio" name="favoriteColors" ng-model="data.color" value="10"> Ten 
</label> 
<input type="text" name="color" id="clr" ng-model="data.color" readonly /> 

JS：

app.controller('MainCtrl', function($scope) { 
    $scope.data = { color: '' }; 
}); 

Answer 2

使用ng-true-value=""在複選框

像這樣

<label class="checkbox-inline"> 
    <input type="checkbox" ng-model="color" ng-true-value="5" ng-false-value="0" name="favoriteColors"> Five 
</label> 
<label class="checkbox-inline"> 
    <input type="checkbox" ng-model="color" ng-true-value="10" ng-false-value="0" ng-model="color" name="favoriteColors"> Ten 
</label> 
<input type="text" name="color" id="clr" ng-model="color" readonly /> 

JSFIDDLE

Answer 3

綁定你的複選框，輸入ng-model爲好，然後相應地賦值。事情是這樣的：

<input type="checkbox" name="favoriteColors" ng-model="isChecked.five"> Five 
<input type="checkbox" name="favoriteColors" ng-model="isChecked.ten"> Ten 

在你的控制器：

$scope.isChecked = {}; 
if ($scope.isChecked.five) { 
    $scope.color = 5; 
} 
if ($scope.isChecked.ten) { 
    $scope.color = 10; 
} 

爲您檢查/取消選中的複選框，它應該自動更新您的輸入值，由於雙向綁定。

Answer 4

<label class="checkbox-inline"> 
    <input type="checkbox" ng-click="color=5" name="favoriteColors"> Five 
</label> 
<label class="checkbox-inline"> 
    <input type="checkbox" ng-click="color=10" name="favoriteColors"> Ten 
</label> 
<input type="text" name="color" id="clr" ng-model="color" readonly /> 

https://jsfiddle.net/5s1bfjco/7/