吳重複與不同組的單選按鈕

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>