CODEWITHSUNDEEP
javascripthtmlangularjsradio-buttonangularjs-ng-repeat
Goku
Goku

Reputation: 1663

Radio buttons with filter using ng-repeat in angular behaving unexpectedly

I have 2 issues that are occurring when i use radio buttons in angular.

  1. I want the default value when the user refreshes the page or visits it for the first time to have the "All()" option selected (i have the checked property set but the default is still not there)

  2. When i click the "All()" radio button, it shows all the list items (as it should). The problem occurs when i click another button to filter with another string; the issue is when i click "All()" again, the filter seems to ignore that the "All()" button is selected altogether.

Basically I want the All() radio button to show unfiltered results.

Here is the plunker:

http://plnkr.co/edit/Bdaaq3cycKPt57h03LX7?p=preview

<body ng-controller="candyController">
          <input type="radio" value="" checked="checked" ng-model="$parent.selectedCandy" name="Candy" />(All)
                          <div data-ng-repeat="candy in candyList">
            <input type="radio" value="{{candy.name}}" ng-model="$parent.selectedCandy" name="Candy" />
                        {{candy.name}}
        </div>
        <table>
          <tbody>
            <tr>
              <th>Name</th>
              <th>Cost</th>
            </tr>
            <tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
              <td>{{candy.name}}</td>
              <td>{{candy.cost}}</td>
            </tr>
          </tbody>
        </table>
      </body>

    </html>

and here is the controller

var app = angular.module('angularjs-starter', []);

app.controller('candyController', function($scope) {
  $scope.candyList = [
    {name:"lolipop", cost:10}, 
    {name:"popsicle", cost:100},
    {name:"ringpop", cost:50},
    {name:"mint", cost:2},
    {name:"chocolate", cost:85},
    {name:"candycorn", cost:1}
  ];
});

Upvotes: 2

Views: 3156

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

**ng-value Per Docs**

Binds the given expression to the value of <option> or input[radio], so that when the element is selected, the ngModel of that element is set to the bound value.

Use ng-value instead of value attribute for make binding workable with respective ng-model on the radio button.

Additionally the (All) radio button doesn't need $parent anotation. it should be directly used as ng-model="selectedCandy", for inner radio button will need $parent because we want to refer controller scope variable.

Markup

<body ng-controller="candyController">
  <input type="radio" ng-value="" checked="checked" ng-model="selectedCandy" name="Candy" />(All)
  <div data-ng-repeat="candy in candyList">
    <input type="radio" ng-value="candy.name" ng-model="$parent.selectedCandy" name="Candy" /> {{candy.name}}
  </div>
  <table>
    <tbody>
      <tr>
        <th>Name</th>
        <th>Cost</th>
      </tr>
      <tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
        <td>{{candy.name}}</td>
        <td>{{candy.cost}}</td>
      </tr>
    </tbody>
  </table>
</body>

Upvotes: 2

Stephen J Barker
Stephen J Barker

Reputation: 1019

I want the default value when the user refreshes the page or visits it for the first time to have the "All()" option selected (i have the checked property set but the default is still not there)

For this I would set the property on the scope in the controller when it is initiated: $scope.selectedCandy = "";

When i click the "All()" radio button, it shows all the list items (as it should). The problem occurs when i click another button to filter with another string; the issue is when i click "All()" again, the filter seems to ignore that the "All()" button is selected altogether.

The problem seems to be with your scope. You target selectedCandy on the $parent scope when repeating the radio buttons (which is correct because your controller scope is above your repeater scope).

When you use $parent.selectedCandy on the radio outside of the repeater it is looking above its scope and not on the controller scope.

Simply remove $parent from the "all" radio.

Upvotes: 2

Related Questions