吴重复与不同组的单选按钮

Question

我创建了一组单选按钮，它没有正确分配给每个组。当我单击其中一个单选按钮组中的某个按钮时，该按钮不起作用。

塞纳里奥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> 

无线电按钮未检查单击

塞纳里奥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> 

时

单选按钮被选中，但只有每组单选按钮中的第一个。

Answer 1

radiobutton由name物业组合，在下面的代码片段，我只是做2组单选按钮。而对于label，则应使用for属性并将其与相关单选按钮的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

在标签使用for

代码：

<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

您应该使用ng-repeat在<label>标签，而不是<div>标签。并使用ng-chage而不是ng-checked。就像这样：

<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用于从孩子父母访问范围

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>