AngularJS当选择一个为true时，如何将所有单选按钮值更新为false？
AngularJS当选择一个为true时，如何将所有单选按钮值更新为false？
提问于 2018-06-04 03:21:25
我从数据库中提取不同的真/假字符串值。我给出的例子只是为了说明我实际上从数据库中得到了什么，这是一个真或假的字符串值，我不能改变这一点。
我想做的是让一个单选按钮显示它们的值，如果为真，则为选中，如果为假，则不被选中。
这个位在我下面的答案中工作得很好，但是当用户选择一个不同的按钮时，我希望将该值设置为“true”，并将所有其他按钮设置为“false”。
我尝试了所有的方法，包括ng-checked，但对ng-model不起作用。我发现angularJS中的单选按钮非常令人困惑，有人能帮我理解一下我应该做什么吗？谢谢你
<!doctype html>
<html ng-app="sample" >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="app/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="app/css/style.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="app/bootstrap/js/bootstrap.min.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script>
var MyApp = angular.module('sample', []);
MyApp.controller('MainCtrl', function($scope) {
$scope.red = 'true';
$scope.yellow = 'false';
$scope.blue = 'false';
$scope.green = 'false';
$scope.orange = 'false';
$scope.purple = 'false';
$scope.black = 'false';
$scope.pink = 'false';
$scope.white = 'false';
});
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container" ><!-- ng-repeat="x in alien.colours" -->
<h3>What colour alien are you?</h3>
<input type="radio" name="AliCol" ng-value="'true'" ng-model="red" />
<label>Red</label> Value is {{red}}<br>
<input type="radio" name="AliCol" ng-value="'true'" ng-model="yellow" />
<label>Yellow</label> Value is {{yellow}}<br>
<input type="radio" name="AliCol" ng-value="'true'" ng-model="blue" />
<label>Blue</label> Value is {{blue}}<br>
<input type="radio" name="AliCol" ng-value="'true'" ng-model="green" />
<label>Green</label> Value is {{green}}<br>
<input type="radio" name="AliCol" ng-value="'true'" ng-model="orange" />
<label>Orange</label> Value is {{orange}}<br>
<input type="radio" name="AliCol" ng-value="'true'" ng-model="purple" />
<label>Purple</label> Value is {{purple}}<br>
<input type="radio" name="AliCol" ng-value="'true'" ng-model="black" />
<label>Black</label> Value is {{black}}<br>
<input type="radio" name="AliCol" ng-value="'true'" ng-model="pink" />
<label>Pink</label> Value is {{pink}}<br>
<input type="radio" name="AliCol" ng-value="'true'" ng-model="white" />
<label>White</label> Value is {{white}}<br>
</div>
</body>
</html>下面是当你选择一个不同的按钮时发生的事情，值被更新为'true‘按钮，但不能被设置为'false’
回答 2
Stack Overflow用户
发布于 2018-06-04 04:23:52
这样做的一种方法(一种非常基本的方法，可以改进很多！)使用对象数组来为您完成此工作。
小提琴：https://jsfiddle.net/t3t6kueL/
在你的Javascript中，你可以这样做：
var MyApp = angular.module('sample', []);
MyApp.controller('MainCtrl', function($scope) {
$scope.colors = [{
name: 'Red', // name => For presentation
value: 'false' // value => For toggling the group's values
},
{
name: 'Yellow',
value: 'false'
},
{
name: 'Blue',
value: 'false'
},
{
name: 'Green',
value: 'false'
},
{
name: 'Orange',
value: 'false'
},
{
name: 'Purple',
value: 'false'
},
{
name: 'Black',
value: 'false'
},
{
name: 'Pink',
value: 'false'
},
{
name: 'White',
value: 'false'
},
]
// Expose a method to change the group's values
$scope.selectColor = function(selectedColorName) {
// Loop through all of the colors
$scope.colors.forEach(function(color) {
// If this is what's being set, then set this to true
// Note: If there are two different objects, with the same name, you will end up with 2 true values here...
if (color.name === selectedColorName) {
color.value = 'true';
// For all the others, set it to false
} else {
color.value = 'false';
}
});
}
});这将允许您移动逻辑并处理要呈现给应用程序代码的内容，从而使您的HTML更精简，如：
<div class="container">
<h3>What colour alien are you?</h3>
<div ng-repeat="color in colors">
<input type="radio" name="AliCol" ng-click="selectColor(color.name)" />
<label>{{color.name}}</label> Value is {{color.value}}<br>
</div>
</div>
Stack Overflow用户
发布于 2018-06-04 04:15:08
使用单个值表示用户的选择。有关工作示例，请参阅下面的代码片段，以及see the docs for more info.
var MyApp = angular.module("sample", [])
MyApp.controller("MainCtrl", function($scope) {
$scope.alienColor = "blue" // set the initial value here
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<div ng-app="sample" ng-controller="MainCtrl">
<div class="container">
<!-- ng-repeat="x in alien.colours" -->
<h3>What colour alien are you?</h3>
<input type="radio" name="AliCol" value="red" ng-model="alienColor" />
<label>Red</label> Value is {{red}}
<br>
<input type="radio" name="AliCol" value="yellow" ng-model="alienColor" />
<label>Yellow</label> Value is {{yellow}}
<br>
<input type="radio" name="AliCol" value="blue" ng-model="alienColor" />
<label>Blue</label> Value is {{blue}}
<br>
<input type="radio" name="AliCol" value="green" ng-model="alienColor" />
<label>Green</label> Value is {{green}}
<br>
<input type="radio" name="AliCol" value="orange" ng-model="alienColor" />
<label>Orange</label> Value is {{orange}}
<br>
<input type="radio" name="AliCol" value="purple" ng-model="alienColor" />
<label>Purple</label> Value is {{purple}}
<br>
<input type="radio" name="AliCol" value="black" ng-model="alienColor" />
<label>Black</label> Value is {{black}}
<br>
<input type="radio" name="AliCol" value="pink" ng-model="alienColor" />
<label>Pink</label> Value is {{pink}}
<br>
<input type="radio" name="AliCol" value="white" ng-model="alienColor" />
<label>White</label> Value is {{white}}
<br>
</div>
{{ alienColor }}
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50670143
复制相关文章
相似问题