帶有ng-repeat的角度單選按鈕列表

Question

如何在清除按鈕時清除單選按鈕的檢查狀態？

清單NG重複單選按鈕，

<label ng-repeat="item in items"> 
    <input type="radio" name="test" ng-model="test" value="{{item.name}}" />{{item.name}} 
</label> 


<a class="undo" ng-click="clear()">Clear</a> 

fiddle

，並有可能從另一個控制器明確檢查狀態？

Answer 1

這將工作正常.. !!!

angular.module("myApp", []).controller("Example", ["$scope", function($scope) { 
 
\t $scope.data = {}; 
 
    
 
    $scope.items = [ 
 
    \t {name: 'one'}, 
 
     {name: 'two'}, 
 
     {name: 'three'}, 
 
     {name: 'four'}, 
 
     {name: 'five'}, 
 
     ]; 
 
     
 
     $scope.clear = function(){ 
 
     $scope.data = {}; 
 
     //alert("hello"); 
 
     } 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="Example"> 
 

 

 
<label ng-repeat="item in items"> 
 
    <input type="radio" name="test" ng-model="data.test" value="{{item.name}}" />{{item.name}} 
 
</label> 
 
<br> 
 
<a class="undo" ng-click="clear()">Clear</a> 
 

 
</div>

Answer 2

您可以使用廣播事件。看到這個答案：https://stackoverflow.com/a/19498009/4161992

然後在您的控制器，可以控制你的輸入無線電，​​這樣做：

.controller('radioController', function($scope){ 
    $scope.$on('triggerClearRadio', function(){ 

     $scope.items.forEach(function (item, i) { 
      item.checked = false; 
     }); 

    }); 
}); 

更改您輸入HTML中使用ng-model="item.checked"代替ng-model="test"

從你清除按鈕，你可以播放'triggerClearRadio'事件（儘管如此稱呼它）：

<button type="button" ng-click="$root.$broadcast('triggerClearRadio')>Clear radios</button> 

看到這個小提琴：http://jsfiddle.net/takuan/aaoub2mg/