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

在复选框

中使用 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 2

我想也许你打算用收音机代替复选框（因为颜色可以是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 3

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

Answer 4

将您的复选框输入绑定到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;
}

由于双向绑定，它会在您选中/取消选中复选框时自动更新输入值。

使用Angular.js选中复选框时如何设置输入字段值

4 个答案: