AngularJS多个无线电选项

时间：2014-10-07 13:25:56

标签： angularjs angularjs-ng-repeat angular-ui

下午好，

我们目前正在尝试学习AngularJS，虽然我们正在寻找一些非常酷的代码，但我们似乎无法解决这个问题。

我们希望在下拉列表功能中显示相对于所选产品的产品选项列表，我们希望能够在每行上勾选一个单选按钮，但是当我们勾选其中一个单选按钮时似乎是在每个栏目中选择所有。

我们附上了我们的代码段和屏幕截图，如果有人可以帮助我们，我们会非常感激。

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

enter image description here enter image description here enter image description here

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

});

enter image description here

更新了Plnkr http://plnkr.co/edit/Dve2jQJ4tHN0y8AUKT2Z

2 个答案:

答案 0 :(得分：0)

查看代码后，您的问题是您在每个重复周期中将单选按钮绑定到同一对象。

让我们看一下目前正在发生的事情，首先你有一个ng-repeat正在重复$ scope.visualItems中的html部分，它正在按预期工作。但是，如果你看一下用于绑定单选按钮选择的ng-model：

 <input type="radio" name="{{visualItem.id}}" 
        ng-model="formData.visualItems.one"
        ng-value="visualItem.one"/>

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

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

你可以做的一件事，就是不知道代码中的完整过程，就是将单选按钮绑定到一个 - 两个 - 并更改这些值布尔值。如果你知道每一个都有相应的颜色，可能需要存储在列表中，你可以这样做。这只是一个建议。

您还可以重构对象，因此每一个 - 两 - 三个是具有isSelected属性和颜色值的对象。 

one: {color:'red', isSelected: false}

然后在你的ngrepeat中你可以这样做：

input type="radio" name="{{visualItem.id}}" 
      ng-model="visualItem.one.isSelected"
      ng-value="visualItem.one"/>

答案 1 :(得分：0)

我认为问题在于将您的单选按钮绑定到同一个ng模型。

第一个建议：将单选按钮绑定到不同的模型

  

NG-模型= “visualItem.three”

每组

。首先选择所有项目，然后它将正常更改。 这样：

<div ng-show="product.name=='Petrol Lawnmower'">
    <div ng-repeat="visualItem in visualItems">
        <label for="">{{visualItem.name}}</label>
        <input type="radio" ng-value="visualItem.one" name="{{visualItem.id}}" ng-model="visualItem.one" />
        <input type="radio" ng-value="visualItem.two" name="{{visualItem.id}}" ng-model="visualItem.two" />
        <input type="radio" ng-value="visualItem.three" name="{{visualItem.id}}" ng-model="visualItem.three" />
    </div>
</div>

第二个建议：是删除ng-model并使用常规的javascript函数获取数据

第三个建议：在选择选项时使用ng-change来编写表达式

相关问题
最新问题