带有ng-repeat的角度单选按钮列表

时间:2016-12-01 14:32:35

标签: angularjs ng-repeat radio

如何点击'清除'清除单选按钮的状态?按钮?

在ng-repeat中列出单选按钮,

<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

是否可以从另一个控制器清除检查状态?

2 个答案:

答案 0 :(得分:1)

您可以使用广播事件。请参阅此答案: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/

答案 1 :(得分:1)

这样可以正常工作.. !!!

angular.module("myApp", []).controller("Example", ["$scope", function($scope) {
	$scope.data  = {};
  
    $scope.items = [
    	{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>