1

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 ?

1

2 Answers 2

1

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>

Sign up to request clarification or add additional context in comments.

Comments

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/

4 Comments

( 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
Edited to include button html for what you are seeking.
Its not working here , could please update my fiddle :(
I found another fiddle that does exactly what you want and updated my answer to work like that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.