CODEWITHSUNDEEP
javascriptangularjsionic-framework
Rohit Vinay
Rohit Vinay

Reputation: 663

ion-radio uncheck on ng-click does not work

I am using ionic framework to build my application, i have need where i need to uncheck ion-radio button when i click input tag, i tried to do so in this ionic play link, but was not successful

HTML

  <ion-content class="padding">
    <label class="item item-input">
      <div class="input-label">
        <i class="ion ion-search"></i>
      </div>
      <input ng-click="uncheck($event)" type="text" ng-model="foodfilter" class="">
    </label>
    <ion-radio ng-model="filter.typefilter" ng-value="'A'">Choose A</ion-radio>
    <ion-radio ng-model="filter.typefilter" ng-value="'B'">Choose B</ion-radio>
    <ion-radio ng-model="filter.typefilter" ng-value="'C'">Choose C</ion-radio>
  </ion-content>

JS

$scope.uncheck = function (event) {
 if ($scope.filter.typefilter == event.target.value) $scope.filter.typefilter = false
}

ionic play link

Upvotes: 0

Views: 2009

Answers (1)

Joey Raso
Joey Raso

Reputation: 26

You are going to want to use ng-click on your input tag.

<input ng-click="uncheck($event)" type="text" ng-model="foodfilter" class="">

The value of filter.typeFilter is a string so you will want to use value instead of ng-value

<ion-radio ng-model="filter.typeFilter" value="A">Choose A</ion-radio>
<ion-radio ng-model="filter.typeFilter" value="B">Choose B</ion-radio>
<ion-radio ng-model="filter.typeFilter" value="C">Choose C</ion-radio>

Also, in order to clear the radio boxes you want to set the value of the ng-model to be the empty string.

$scope.filter = {
    typeFilter: ""
}

$scope.uncheck = function (event) {
    $scope.filter.typeFilter = "";
}

Upvotes: 1

Related Questions