NG-重复单选按钮在特定条件下切换



我有几个由ng-repeat生成的单选按钮切换。默认情况下,我希望所有单选按钮都切换,如果条件适用,我只想切换该单选按钮。

<li ng-repeat="method in itemGroup.ShippingMethods">
    <input ng-model="itemGroup.SelectedShippingMethod" 
           ng-change="changeShipping(itemGroupKey, 
           itemGroup.SelectedShippingMethod)" 
           type="radio" 
           name="Shipping" 
           id="method.Name" 
           value="method.Name" 
    />

在我的JS文件中:

$scope.itemGroup = { SelectedShippingMethod: "Express" };

该代码的目的是默认切换第一个按钮,除非命中条件(快递(,在该条件中将切换该按钮。

在[标准,快速

,快速]列表中,将切换标准单选按钮。在[标准,快速,快速]列表中,将切换快速单选按钮。

任何帮助将不胜感激。

您可以在无线电输入上使用类似的东西:

ng-checked="$first || item == 'Express'"

注意:item == 'Express'将根据数据和循环的结构而有所不同。


下面是此解决方案的简单演示:

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  $scope.itemslists = {
    list1: ['Standard', 'Fast', 'Speedy'],
    list2: ['Standard', 'Express', 'Speedy'],
    list3: ['Standard', 'Fast', 'Express']
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul style="list-style-type: none" ng-repeat="(list, items) in itemslists">
    <h3 style="margin-bottom: 2px">{{list}}</h3>
    <li ng-repeat="item in items">
      <label>
        <input type="radio" name="{{list}}" ng-checked="$first || item == 'Express'"/>
        {{item}}
      </label>
    </li>
  </ul>
</body>

最新更新