ラジオボタンのグループが異なるNgリピート

Question

ラジオボタンのグループを作成しましたが、グループごとに正しく割り当てられませんでした。ラジオボタングループの1つからボタンをクリックすると、ボタンが機能しません。

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以下のコードでは、私はちょうど2人のラジオボタンのグループを作り、nameプロパティによってグループ化されます。 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

かわり<div>タグのng-repeat<label>でタグを使用する必要があります。 ng-checkedの代わりにng-chageを使用してください。このように：

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

を親スコープにアクセスするために使用されます