AngularJS несколько вариантов радио

Question

Добрый день,

В настоящее время мы пытаемся узнать 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] 
     }] 
    } 

ОБНОВЛЕНО 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

Answer 1

Посмотрев на свой код, проблема заключается в том, что вы привязываете переключатели к одному и тому же объекту в каждом цикле повтора.

Давайте посмотрим, что происходит в данный момент. Сначала у вас есть ng-repeat, который повторяет раздел html из $ scope.visualItems, который работает как ожидалось. Тем не менее, если вы посмотрите на нг-модели вы используете, чтобы связать выбор радио-кнопки тоже:

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

В каждом повторе НГ-модель привязки к тому же значению, что каждый раздел в повторе будет изменяться, когда вы выберете одну радиокнопку, которая будет работать так, как должна работать двусторонняя привязка.

Чтобы устранить эту проблему, вам необходимо привязать каждую радиокнопку к уникальной модели, я предлагаю создать выбранное свойство в списке, который повторяется, чтобы каждый переключатель мог связываться со своим уникальным значением.

Одна вещь, которую вы могли бы сделать, и не зная полного процесса в вашем коде, заключалась бы в том, чтобы связать переключатели с одним-двумя вами и изменить эти значения Boolean. Вы можете сделать это, если знаете, что для каждого есть соответствующий цвет и, возможно, его нужно будет сохранить в списке. Это всего лишь предложение.

Вы также можете реструктурировать свой объект, чтобы каждый из них - два-три - объект с свойством isSelected и значением цвета.

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

А потом у вас ngrepeat вы могли бы сделать это:

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

Answer 2

Я думаю, что проблема заключается в связывании ваших радиокнопок же нг-модели.

Первое предложение: чтобы связать радиокнопки различных моделей

ng-model="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> 

Второе предложение: чтобы удалить нг-модель и получить данные с помощью регулярного яваскрипта функции

Третьего предложения: чтобы использовать нг-изменения, чтобы записать выражение при выборе опции