Home ng-repeat with radio button toggle on a specific condition
Reply: 1

ng-repeat with radio button toggle on a specific condition

Andrew Hsu
1#
Andrew Hsu Published in 2018-01-13 07:23:37Z

I have a couple radio button toggles generated by ng-repeat. By default, I would like the first radio buttons all toggled, and if a conditional applies, I would like only that radio button toggled.

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

In my JS file:

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

The intention of the code is to have the first button toggled by default, unless the condition is hit (Express Shipping), in which that button would be toggled.

In a list of [Standard, Fast, Speedy], Standard radio button would be toggled. In a list of [Standard, Fast, Express], Express radio button would be toggled.

Any help would be greatly appreciated.

Omar Einea
2#
Omar Einea Reply to 2018-01-15 18:30:10Z

You could use something like this on you radio inputs:

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

Note: item == 'Express' will be different according to the structure of your data and looping.


Here's a simple demo of this solution:

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>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306419 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO