Angular radio button listing with ng-repeat

Question

How can i clear radio buttons checked status when click on 'clear' buttons ?

Listing radio buttons in 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

And is it possible clear checked status from another controller ?

Possible duplicate of [AngularJs. Is it possible to deselect HTML “radio” input by click?](http://stackoverflow.com/questions/25443018/angularjs-is-it-possible-to-deselect-html-radio-input-by-click) — Matheno, Dec 01 '16 at 14:47

score 1 · Answer 1 · edited May 23 '17 at 11:45

1

You can use a broadcast event. See this answer: https://stackoverflow.com/a/19498009/4161992

Then in your controller that controls your input radio, do this:

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

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

    });
});

Change your input html to use ng-model="item.checked" instead of ng-model="test"

From your clear button you can broadcast the 'triggerClearRadio' event (name it something better though) like this:

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

See this fiddle: http://jsfiddle.net/takuan/aaoub2mg/

edited May 23 '17 at 11:45

Community

1
1

answered Dec 01 '16 at 14:42

Mike Harrison

1,309
12
17

( You have dont it when double click on same checkbox ) Here I have a separate "clear" button ,it should work when i click on 'clear' button – Hunter Dec 01 '16 at 15:02
Edited to include button html for what you are seeking. – Mike Harrison Dec 01 '16 at 15:05
Its not working here , could please update my fiddle :( – Hunter Dec 01 '16 at 15:21
I found another fiddle that does exactly what you want and updated my answer to work like that. – Mike Harrison Dec 01 '16 at 15:33

chandrakant · Accepted Answer · 2016-12-01T17:26:48.833

This will works fine..!!!

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>

Angular radio button listing with ng-repeat

2 Answers2