Ng-重复与不同组的单选按钮

Question

I created a group of radio buttons and it didn't assign properly for each group. The button is not working when I click one of the button from one of the radio button group.

Senario 1

<div ng-repeat="m in meals">
  <label class="linked-radio"><span class="radio primary"><span></span>
    </span>{{ m.name }}
    <input type="radio" id="{{ m.id }}" ng-model="mealselected" ng-checked="isMealSelected(m.id);"/>
  </label>
</div>

The radio button is not check when click

Senario 2

<div ng-repeat="m in meals">
  <input type="radio" id="{{ m.id }}" ng-model="mealselected"/>
    <label class="linked-radio">
        <span class="radio primary">
            <span></span>
        </span>{{ m.name }}
  </label>
</div>

The radio button is checked but only the first one in each every group of radio buttons.

Answer 1

radiobutton is grouped by name property, in the below code snippet, I just make 2 radiobutton groups. And for label , you should use for property and bind it with the relevant radiobutton's id.

 angular.module("app", []) .controller("myCtrl", function($scope) { $scope.mealselected = false; $scope.meals = [ { id: 1, name: 'meal1' }, { id: 2, name: 'meal2' }, { id: 3, name: 'meal3' } ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> <h1>Group1</h1> <div ng-repeat="m in meals"> <label class="linked-radio" for="{{ m.id }}"><span class="radio primary"><span></span> </span>{{ m.name }} <input type="radio" id="{{ m.id }}" name="group1" ng-model="mealselected" /> </label> </div> <h1>Group2</h1> <div ng-repeat="m in meals"> <input type="radio" id="{{ m.id }} + 2" name="group2" ng-model="mealselected" /> <label class="linked-radio" for="{{ m.id }} + 2"> <span class="radio primary"> <span></span> </span>{{ m.name }} </label> </div> </div> 

Answer 2

Use for in label

Code :

<div ng-repeat="m in meals">
  <input type="radio" id="{{ m.id }}" name="radio_meal" ng-model="mealselected" value="{{m.id}}"/>
    <label for="{{ m.id }}" class="linked-radio">
        <span class="radio primary">
            <span></span>
        </span>{{ m.name }}
  </label>
</div>

Answer 3

You should use ng-repeat in <label> tag instead of <div> tag. And use ng-chage instead of ng-checked . Like this:

 <div> <label class="linked-radio" ng-repeat="m in meals" > {{m.name}} <input type="radio" ng-model="$parent.mealselected" ng-value="m.id" ng-change="$parent.isMealSelected(m.id)"/> </label> </div> 

$parent is used to access parent scope from child

Answer 4

DEMO

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function($scope) { $scope.meals = [ { id: 1, name: 'first' }, { id: 2, name: 'second' }, { id: 3, name: 'third' } ]; $scope.mealselected = ''; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <div ng-repeat="m in meals"> <label class="linked-radio" for="{{ m.id }}">{{ m.name }} <input type="radio" id="{{ m.id }}" name="meal" ng-model="mealselected"/> </label> </div> </div>