AngularJS 多个单选选项 [英] AngularJS multiple radio options
问题描述
下午好，
我们目前正在尝试学习
在查看您的代码后，您的问题是您在每个重复循环中都将单选按钮绑定到同一个对象.
让我们看看当前发生了什么，首先你有一个 ng-repeat 重复 $scope.visualItems 中的一段 html，它按预期工作.但是，如果您也查看用于绑定单选按钮选择的 ng-model:
在每次重复中，ng-model 被绑定到相同的值，因此当您选择一个单选按钮时，重复中的每个其他部分都会改变，这是双向绑定应该工作的方式.
要解决此问题，您需要将每个单选按钮绑定到唯一的模型，我建议在列表中创建一个重复的 in selected 属性，以便每个单选按钮都可以绑定到其自己的唯一值.
在不知道代码中的完整过程的情况下，您可以做的一件事是将单选按钮绑定到一 - 两个 - 你并将这些值更改为布尔值.如果您知道每个颜色都有对应的颜色并且可能需要存储在列表中，那么您可以这样做.这只是一个建议.
您还可以重构您的对象，使每一个 - 两个 - 三个都是一个具有 isSelected 属性和颜色值的对象.
一:{color:'red', isSelected: false}然后在你的 ngrepeat 你可以这样做:
input type="radio" name="{{visualItem.id}}"ng-model="visualItem.one.isSelected"ng-value="visualItem.one"/>Good afternoon,
We are currently trying to learn AngularJS and although we're picking up some pretty cool codes we can't seem to figure this issue out.
We are wanting to display a list of product options relative to the selected product within the dropdown feature from here we want to be able to tick one radio button on each row but at the moment when we tick one of the radio buttons it seems to be selecting all within each of the columns.
We've attached our code snippets and screenshots, if anyone could help us we'd greatly appreciate it.
Thank you. Original Plnkr http://embed.plnkr.co/bpMoLNnf4zs5VK4kx1JJ/preview
Original HTML
<div class="form-group">
<h3>Product</h3>
</div>
<div class="form-group">
<div>
<select ng-model="formData.product" ng-options="product.name for product in products" style="color:#000;"></select>
</div>
<div ng-show="formData.product.name=='Petrol Lawnmower'">
<div ng-repeat="visualItem in visualItems">
<label for="">{{visualItem.name}}</label>
<input type="radio" name="{{visualItem.id}}" ng-model="formData.visualItems.one" ng-value="visualItem.one"/>
<input type="radio" name="{{visualItem.id}}" ng-model="formData.visualItems.two" ng-value="visualItem.two"/>
<input type="radio" name="{{visualItem.id}}" ng-model="formData.visualItems.three" ng-value="visualItem.three"/>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="{{formData.product.url}}" class="btn btn-block btn-info">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
<a ui-sref="form.usage" class="btn btn-block btn-info">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Previous Section
</a>
<br/>
</div>
</div>
Original JS
// Products
$scope.products = [
{id: '1', name: 'Petrol Lawnmower' },
{id: '2', name: 'Electric Lawnmower'},
{id: '3', name: 'Petrol Chainsaw'},
{id: '4', name: 'Electric Chainsaw'},
{id: '5', name: 'Petrol Timmer'},
{id: '6', name: 'Electric Timmer'},
{id: '7', name: 'Etc'}
];
$scope.product = {
productItems: [{
Product: $scope.products[0]
}]
}
// Visual Test
$scope.visualItems = [
{ id:'1', name: 'Fuel Empty', one: 'red', two: 'amber', three: 'green'},
{ id:'2', name: 'Oil Empty', one: 'red', two: 'amber', three: 'green'},
{ id:'3', name: 'Spark Plug', one: 'red', two: 'amber', three: 'green'},
{ id:'4', name: 'Air Filter', one: 'red', two: 'amber', three: 'green'},
{ id:'5', name: 'Blade', one: 'red', two: 'amber', three: 'green'},
{ id:'6', name: 'Pull Start', one: 'red', two: 'amber', three: 'green'},
{ id:'7', name: 'Deck', one: 'red', two: 'amber', three: 'green'},
{ id:'8', name: 'Wheels', one: 'red', two: 'amber', three: 'green'},
{ id:'9', name: 'Handles', one: 'red', two: 'amber', three: 'green'},
{ id:'10', name: 'Throttle/Pull Cable', one: 'red', two: 'amber', three: 'green'},
{ id:'11', name: 'Primer Bulb', one: 'red', two: 'amber', three: 'green'},
{ id:'12', name: 'Grass Box', one: 'red', two: 'amber', three: 'green'},
{ id:'13', name: 'Fuel Pipe', one: 'red', two: 'amber', three: 'green'}
];
$scope.visualItem = {
visual: [{
VisualItem: $scope.visualItems[0]
}]
}
Updated HTML
<div class="form-group">
<h3>Product</h3>
</div>
<div class="form-group">
<div>
<select ng-model="formData.product" ng-options="product.name for product in products" style="color:#000;"></select>
</div>
<div ng-show="formData.product.name=='Petrol Lawnmower'">
<div ng-repeat="visualItem in visualItems">
<label for="">{{visualItem.name}}</label>
<input type="radio" name="{{visualItem.id}}" ng-model="visualItem.one.isSelected" ng-value="visualItem.one"/>
<input type="radio" name="{{visualItem.id}}" ng-model="visualItem.one.isSelected" ng-value="visualItem.one"/>
<input type="radio" name="{{visualItem.id}}" ng-model="visualItem.one.isSelected" ng-value="visualItem.one"/>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="{{formData.product.url}}" class="btn btn-block btn-info">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
<a ui-sref="form.usage" class="btn btn-block btn-info">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Previous Section
</a>
<br/>
</div>
</div>
Updated JS
angular.module('formApp', ['ngAnimate', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})
.state('form.packaging', {
url: '/packaging',
templateUrl: 'form-packaging.html'
})
.state('form.usage', {
url: '/usage',
templateUrl: 'form-usage.html'
})
.state('form.product', {
url: '/product',
templateUrl: 'form-product.html'
})
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
$urlRouterProvider.otherwise('/form/packaging');
})
.controller('formController', function($scope) {
// Products
$scope.products = [
{id: '1', name: 'Petrol Lawnmower' },
{id: '2', name: 'Electric Lawnmower'},
{id: '3', name: 'Petrol Chainsaw'},
{id: '4', name: 'Electric Chainsaw'},
{id: '5', name: 'Petrol Timmer'},
{id: '6', name: 'Electric Timmer'},
{id: '7', name: 'Etc'}
];
$scope.product = {
productItems: [{
Product: $scope.products[0]
}]
}
// Visual
$scope.visualItems = [
{
id:'1',
name: 'Fuel Empty',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'2',
name: 'Oil Empty'
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'3',
name: 'Spark Plug'
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'4',
name: 'Air Filter',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'5',
name: 'Blade',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'6',
name: 'Pull Start',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'7',
name: 'Deck',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'8',
name: 'Wheels',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'9',
name: 'Handles',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'10',
name: 'Throttle/Pull Cable',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'11',
name: 'Primer Bulb',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'12',
name: 'Grass Box',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
},
{
id:'13',
name: 'Fuel Pipe',
one: {color: 'red', isSelected: 'false'},
two: {color: 'amber', isSelected: 'false'},
three: {color: 'green', isSelected: 'false'}
}
];
$scope.visualItem = {
visual: [{
VisualItem: $scope.visualItems[0]
}]
}
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.processForm = function() {
alert('awesome!');
};
});
Updated Plnkr http://plnkr.co/edit/Dve2jQJ4tHN0y8AUKT2Z
After looking at your code, your issue is that you are binding the radio buttons to the same object in each repeat cycle.
Lets take a look at what is currently happening, First you have an ng-repeat that is repeating a section of html from the $scope.visualItems, which is working as expected. However, if you look at the ng-model you are using to bind the selection of the radio button too:
<input type="radio" name="{{visualItem.id}}"
ng-model="formData.visualItems.one"
ng-value="visualItem.one"/>
In each repeat the the ng-model is being bound to the same value, thus every other section in the repeat will change when one you select one radio button, which is the way the two way binding should work.
To fix this issue you need to bind each radio button to a unique model, I suggest creating an in selected property in the list that is repeated so that each radio button can bind to its own unique value.
One thing that you could do, and not knowing the full process in your code, would be to bind the radio buttons to one - two - thee and change those values Boolean. You could do this if you know that for each one there is a corresponding color and might need to be stored in the list. This is only a suggestion.
You could also restructure your object so each one - two - three is an object with an isSelected property and a color value.
one: {color:'red', isSelected: false}
And then in you ngrepeat you could do this:
input type="radio" name="{{visualItem.id}}"
ng-model="visualItem.one.isSelected"
ng-value="visualItem.one"/>
这篇关于AngularJS 多个单选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
