CODEWITHSUNDEEP
angularjs
SaraMousavi
SaraMousavi

Reputation: 89

'Thy thee ng-repeat with different ng-model for each loop of radio buttons

i want have different ngModel for each row of radios and i want get the value of each radio button that is clicked in console like the image below.

enter image description here 

angular.module('myApplication', [])
        .controller("columnChart", function ($scope, $timeout, $rootScope) {
    $rootScope.chart = ['A', 'B', 'C'];
    $rootScope.myVar = [1, 2, 3];
    $rootScope.update = function () {
      console.log($scope.myVar);
      }
  });
   
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

      <div ng-app = "myApplication" ng-controller="columnChart" id="columnChart">
      <div ng-repeat="(key, value) in chart">
          {{value}}
          <label ng-repeat="(k, v) in $parent.myVar">
              <input type="radio" name="pageSet" ng-model="k" ng-value="n" ng-init="k = 1" ng-change="update()" />{{v}}
          </label>
       </div>
       </div>

Upvotes: 3

Views: 191

Answers (1)

squiroid
squiroid

Reputation: 14027

Here is the answer with the plunker

https://plnkr.co/edit/jaUWVihT2ShWcZxw9pRb?p=preview

What you were doing wrong is that radio button should have different name property to be selected differently.

In your case all the radio button is getting name="pageSet"

So, I have changed it to name="pageSet-{{value}}" where the value is dynamic and now the names of different radio button is different and they can select individually.

<input type="radio" name="pageSet-{{value}}" ng-model="k" ng-value="n" ng-init="k = 1" ng-change="update()" />{{v}}

Hope it solves your problem.

Upvotes: 1

Related Questions