[英]AngularJS How would it be possible to update all radio button values to false when one is selected as true?
我從數據庫中提取單獨的真/假字符串值。 我給出的示例僅用於說明我從數據庫中實際獲得的字符串值是true還是false的信息，我無法更改。
我想做的是讓一個單選按鈕顯示其值（如果為true則選擇），如果為false則不顯示。
這一點在下面的回答中很好用，但是當用戶選擇其他按鈕時，我想將該值設為“ 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”
一種這樣做的方法（一個非常基本的方法，可以做很多改進！）是使用對象數組為您完成這項工作。
小提琴： 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>
使用單個值表示用戶的選擇。 請參閱下面的代碼片段以獲取工作示例，並參閱文檔以獲取更多信息。
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>
在AngularJS中如何取消選中單選按鈕以使所有對象變為假
[英]In AngularJS how to uncheck a radio button to make all objects become false
當我選擇單選按鈕時，將選擇所有單選按鈕。 我只希望選擇一個單選按鈕
[英]when i select radio button then all radio button is selected. i want only one radio button should be selected
如何使用remote：在使用radio_button / radio button的rails中為true
[英]How to use remote:true in rails using radio_button/ radio button no mark when selected
將所有單選按鈕設置為false，然后在Redux reducer中將其設置為true
[英]Set all radio buttons to false, then set one to true in Redux reducer
如何將單選按鈕為是或否輸入到Firebase數據庫中？
[英]How to input if radio button is true or false into Firebase database?
單擊AngularJS中的按鈕時復選框的列表為真還是假
[英]Get true or false for list of checkboxes when clicked button in AngularJS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.