Question

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

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>

单击
时不检查单选按钮

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>

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

Answer 1

radiobutton按name属性分组，在下面的代码段中，我只创建2个radiobutton组。对于label，您应该使用for属性并将其与相关的radiobutton的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

<强>样本

＆＃13;

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 = '';
});

＆＃13;

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

＆＃13;

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

4 个答案: