javascript - Ng-repeat 不同的单选按钮组

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>

The radio button is not check when click

塞纳里奥 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 由 name 属性分组，在下面的代码片段中，我只创建了 2 个单选按钮组。对于 label，您应该使用 for 属性并将其与相关单选按钮的 ID 绑定(bind)。

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>