0

How can i filter category values when clicking on a radio button?

Plunker

  • Actually I want to filter category values.

For Example :- in plunker we have displayed category values using of data-ng-bind. there are two radio buttons are available, 1.Moral Ethics 2. Religion & Culture. if we click the first radio button of moral ethics it's should filter only the moral ethis values and if we click the second radio button of religon & Culture it's should filter only the religon & Culture values. .

My HTML radio button:-

<div class="col-md-3">
 <label class="green"><input type="radio" name="myquestion" data-ng-model="myquestion.category" value="myquestion" ><span>Moral Ethics</span></label>
  </div>

<div class="col-md-3">
 <label class="green"><input type="radio" name="culture" data-ng-model="culture.category" value="culture" ><span>Religion & Culture</span></label>
 </div>

My HTML Filter:-

ng-repeat="question in questions | filter: myquestion | filter:culture"

My Html Data:-

 <div ng-repeat="question in questions | filter:myquestion | filter:culture">
   <small>
   <span >{{$index + 1}}.</span>
   <span data-ng-bind="question.category"></span>
   </small>
</div>

My Controller Data:-

 $scope.questions = [  
   {  
 "_id":"5863d3aaacaeddc00663bc07",
 "user":{  
 "roles":[  
 "admin"
 ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
  "friend_tag":[  

      ],
  "emotion":"Confused",
  "category":"Religion & Culture",
  "created":"2016-12-28T15:00:58.777Z"
   },
   {  
  "_id":"5863d3aaacaeddc00663bc07",
  "user":{  
  "roles":[  
            "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
  "friend_tag":[  

      ],
  "emotion":"Confused",
  "category":"Moral Ethics",
  "created":"2016-12-28T15:00:58.777Z"
   },
   {  
  "_id":"5863d3aaacaeddc00663bc07",
  "user":{  
  "roles":[  
  "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
  "friend_tag":[  

      ],
  "emotion":"Confused",
  "category":"Environment & Health",
  "created":"2016-12-28T15:00:58.777Z"
   },
   {  
  "_id":"5863d3aaacaeddc00663bc07",
  "user":{  
  "roles":[  
  "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
  "friend_tag":[  

      ],
  "emotion":"Confused",
  "category":"Environment & Health",
  "created":"2016-12-28T15:00:58.777Z"
   },
   {  
  "_id":"5863d3aaacaeddc00663bc07",
  "user":{  
  "roles":[  
  "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
      "friend_tag":[  

      ],
      "emotion":"Confused",
      "category":"Religion & Culture",
      "created":"2016-12-28T15:00:58.777Z"
   },
   {  
      "_id":"5863d3aaacaeddc00663bc07",
      "user":{  
         "roles":[  
            "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
      "friend_tag":[  

      ],
      "emotion":"Confused",
      "category":"Religion & Culture",
      "created":"2016-12-28T15:00:58.777Z"
   },
   {  
      "_id":"5863d3aaacaeddc00663bc07",
      "user":{  
         "roles":[  
            "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
      "friend_tag":[  

      ],
      "emotion":"Confused",
      "category":"Moral Ethics",
      "created":"2016-12-28T15:00:58.777Z"
   }
]
  • please look my plunker for reference and help me.. please update the plunker as well to know the exact solution...thanks.
R. Mani Selvam
  • 320
  • 8
  • 36

3 Answers3

2

Change value of check box like below that's it

<input type="radio" name="myquestion" data-ng-model="myquestion.category" value="Moral Ethics" >                       
<input type="radio" name="myquestion" data-ng-model="myquestion.category" value="Religion & Culture" >

and your repeated div as below

<div ng-repeat="question in questions | filter:myquestion">
      <small>
                    <span >{{$index + 1}}.</span>
                      <span data-ng-bind="question.category"></span>
                  </small>

    </div>

as well as please find updated plunker

Curiousdev
  • 5,668
  • 3
  • 24
  • 38
1

You have some mistakes in using radio buttons in angular so here is some changes you have to do. Below is the updated code for your view.

<div class="col-md-3">
      <label class="green">
        <input type="radio" name="myquestion" data-ng-model="selectedCategory" value="Moral Ethics"><span>Moral Ethics</span></label>
    </div>

    <div class="col-md-3">
      <label class="green">
        <input type="radio" name="culture" data-ng-model="selectedCategory" value="Religion & Culture"><span>Religion & Culture</span></label>
    </div>

    <div ng-repeat="question in questions | filter:selectedCategory">
      <small>
                    <span >{{$index + 1}}.</span>
                      <span data-ng-bind="question.category"></span>
                  </small>

    </div>
Avantika Saini
  • 792
  • 4
  • 9
Arun Redhu
  • 1,584
  • 12
  • 16
1

I update your Plunker

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

for that:

<div ng-controller="MyCntrl">
 <div class="col-md-3">
      <label class="green"><input type="radio" name="myquestion" data-ng-model="category" value="Moral Ethics" ><span>Moral Ethics</span></label></div>

<div class="col-md-3">
      <label class="green"><input type="radio" name="culture" data-ng-model="category" value="Religion & Culture" ><span>Religion & Culture</span>      </label></div>

 <div ng-repeat="question in questions|filter:category ">
    <small>
                <span >{{$index + 1}}.</span>
                  <span data-ng-bind="question.category"></span>
              </small>

    </div>

  </div>

it works fine.

user4858836
  • 47
  • 7