AngularJS（ng-repeatの内側）のラジオボタンでtrue/falseを切り替えます

Question

Hej、私は「ほぼ」働くフィドルを持っています。私はアイテムのリストを持っており、ラジオボタンが選択されていればその値を変更したい。

CodePen： http://codepen.io/anon/pen/MyvQoP

HTML：

<div ng-app="myapp" ng-controller="myController"> 
    <div ng-repeat="food in foodList"> 
    <span>{{food.name}}</span> 
    <input type="radio" ng-model="food.selected" name="radiofood" ng-value="true"> 
    </div> 
</div> 

JS：ここでは、コードです

angular.module('myapp', []).controller("myController", myController) 

function myController($scope) { 
    $scope.foodList = [ 
    { 
     name: 'banana', 
     selected: 'false' 
    }, 
    { 
     name: 'orange', 
     selected: 'false' 
    }, 
    { 
     name: 'apple', 
     selected: 'false' 
    } 
    ] 
} 

問題：は、へのそれの値を変更するラジオボタンを一度クリックした
trueしかし、別のものをクリックしても前のものはfalseに変更されません。だから、あなたがひとつずつクリックすると、すべてが真実になります。私はただ一つが真の価値を持ってほしい。

おかげ

---編集2016年3月31日---
私は、カスタムのfuctionを記述することなく、解決策を探していましたが、それはこれを行うことができない判明。私は最高のものとして@Ankit Pundhirの答えをマークしましたが、それは私が目指していたものではありませんでした。

Answer 1

ファイルコントローラにメソッドを追加します。

$scope.selectFood = function(selectedFood){ 
    angular.forEach($scope.foodList,function(food){ 
     if(food != selectedFood){ 
      food.selected = false; 
     } 
    }) 
}; 

をラジオボタンにng-change="selectFood(food)"を追加します。

Answer 2

最も簡単な解決策は、入力にNG-変更イベントを追加してからのparamとしてselectedFoodとる関数を記述し、次のことを行うことです。foodListを通じて

1. 反復され、偽
にすべての値を変更しますselectedFoodの
2. トグル状態（真セット偽エンドその逆の場合）は、このような

何か：

$scope.toggleParam = function(selectedFood){ 
    loopThroughAndSetToFalse(); 
    findAndSetReverseValue(selectedFood); 
} 
function loopThroughAndSetToFalse(){ 
    for(var i=0; i<$scope.foodList.length; i++){ 
    $scope.foodList[i].selected = false; 
    } 
} 
function findAndSetReverseValue(selectedFood){ 
    for(var i=0; i<$scope.foodList.length; i++){ 
    if($scope.foodList[i].name === selectedFood.name){ 
     $scope.foodList[i].selected = !(selectedFood.selected); 
    } 
    } 
} 

し、HTMLは次のようになります：答えのための

<div ng-app="myapp" ng-controller="myController"> 
    <div ng-repeat="food in foodList"> 
    <span>{{food.name}}</span> 
    <input type="radio" ng-model="food.selected" name="radiofood" ng-change="toggleParam(food)" ng-value="true"> 
    </div> 
    <br><br> 
    {{foodList[0]}}<br> 
    {{foodList[1]}}<br> 
    {{foodList[2]}} 
</div>