AngularJS多个单选选项 [英] AngularJS multiple radio options

问题描述

下午好，

我们目前正在尝试学习 AngularJS ，尽管我们正在挑选一些很酷的代码，但我们无法似乎可以弄清楚这个问题.

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.

谢谢. 原始Plnkr http://embed.plnkr.co/bpMoLNnf4zs5VK4kx1JJ/preview

原始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>

原始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]
        }]
    }

更新的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>

更新了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!');  
    };

});

更新的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.

让我们看一下当前正在发生什么，首先，您有一个ng-repeat，它重复了$ scope.visualItems中的html部分，该部分按预期工作.但是，如果您查看ng-model，您也将用来绑定单选按钮的选择:

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

在每个重复中，ng模型被绑定到相同的值，因此，当您选择一个单选按钮时，重复中的每个其他部分都会改变，这是双向绑定应该起作用的方式.

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.

要解决此问题，您需要将每个单选按钮绑定到一个唯一的模型，我建议在列表中创建一个in选定的属性，并重复该操作，以便每个单选按钮可以绑定到其自己的唯一值.

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.

您可以做的一件事是，不知道代码中的完整过程，就是将单选按钮绑定到一个-两个-thee，然后将这些值更改为Boolean.如果您知道每种颜色都有对应的颜色，并且可能需要将其存储在列表中，则可以执行此操作.这只是一个建议.

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.

您还可以重组对象，以便每个对象-每个对象-两个对象都是具有isSelected属性和颜色值的对象.

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}

然后在您的ngrepeat中，您可以执行以下操作:

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屋！