-1

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

My Plunker

  • Actually I want to filter category values in list of questions.
  • we have user data's and question data's in plunker.
  • user has two categories like "categories": ["Religion & Culture","Social Psychology"],.
  • question has various of categoryin list.
  • I am exactly looking to filter user categories values only, in that question category lists.

For Example :- in plunker we have displayed category values using of ng-repeat. the user categories array values are displayed using of two radio buttons, 1.Religion & Culture 2. Social Psychology. if we click the first radio button of Religion & Culture it's should filter only the Religion & Culture in question lists and if we click the second radio button of Social Psychology it's should filter only the religon & Culture values in question lists. .

My HTML radio button:-

    <ul>
 <li ng-repeat="mani in users" ><input type="radio" name="myquestion" data-ng-model="myquestion" ng-value="{{mani.categories[0]}}"    id="{{mani.categories[0]}}"><label for="{{mani.categories[0]}" >{{mani.categories[0]}}</label>
 </li>

   <li ng-repeat="mani in users" ><input type="radio" name="myquestion" data-ng-model="myquestion" ng-value="{{mani.categories[1]}}"    id="{{mani.categories[1]}}"><label for="{{mani.categories[1]}" >{{mani.categories[1]}}</label>
      </li>

   </ul>

My HTML Filter:-

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

My Html Data:-

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

 </div>

My Controller User Data:-

    $scope.users=[
    {
"_id": "58e73c5c9e2f3f1421e241be",
"displayName": "sarawana kumar",
"provider": "local",
"location": "chennai",
"username": "sarawana",
"dob": "1991-10-04T18:30:00.000Z",
"phone": 7299345250,
"religion": "hindu",
"__v": 0,
"created": "2017-04-07T07:14:36.773Z",
"roles": [
"user"
],
"category": [],
"profileImageURL": "modules/users/client/img/profile/default.png",
"email": "[email protected]",
"categories": [
"Religion & Culture",
"Social Psychology"
],
"lastName": "kumar",
"firstName": "sarawana"
}]

My Question Data:-

    $scope.questions = [
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},

"friend_tag": [],
"emotion": "Confused",
"category": "Religion & Culture",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},

{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},

"friend_tag": [],
"emotion": "Confused",
"category": "Moral Ethics",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},

"friend_tag": [],
"emotion": "Confused",
"category": "Social Psychology",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},

"friend_tag": [],
"emotion": "Confused",
"category": "Environment & Health",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},

"friend_tag": [],
"emotion": "Confused",
"category": "Religion & Culture",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},

"friend_tag": [],
"emotion": "Confused",
"category": "Religion & Culture",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},

"friend_tag": [],
"emotion": "Confused",
"category": "Social Psychology",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
}
]

  • Plunker for reference.

  • We don't know where i did a mistake so please look my plunker for reference and help me.. please update the plunker as well to know the exact solution...thanks.

  • i have created similar answer please check this plunker http://plnkr.co/edit/1Zzc6nRylgETOvQp3SI2?p=preview i am exactly looking for the same answer in this plunker filtering the values but i want to filter user categories array values.....

Improve this question

5 Answers 5

Reset to default
1

Please refer this and we will improve code and filtering

code

I wrote this method

$scope.changed = function (category) {
  $scope.result = [];
  angular.forEach($scope.questions, function(question) {
    if(question.category === category) {
      $scope.result.push(question);
    }
  });
};
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

hi thanks for your valuable answer, I'm looking for below given similar answer so can you check that and update the solution ....please update this plunker :- plnkr.co/edit/9mbWXEorljKEFLkREcZh?p=preview as well to know the exact solution
1

I think the problem is just because you used {{...}} inside of an ngValue, which is not necessary.

And also you tried to use myquestion to filtre your datas. But you setted this value for every items in ngRepeat in the same variable. So you need to use an array or different variable depending on the ngRepeat item (or don't use ngRepeat if you have only 1 user) like this :

<div class="col-md-3" ng-init="myquestion = []">
    <ul ng-repeat="mani in users">
        <li>
            <input type="radio" name="myquestion" data-ng-model="myquestion[$index]" ng-value="mani.categories[0]" id="{{mani.categories[0]}}">
            <label for="{{mani.categories[0]}" >{{mani.categories[0]}}</label>
        </li>
        <li>
            <input type="radio" name="myquestion" data-ng-model="myquestion[$index]" ng-value="mani.categories[1]" id="{{mani.categories[1]}}">
            <label for="{{mani.categories[1]}" >{{mani.categories[1]}}</label>
        </li>             
    </ul>

Look a this plunker

Improve this answer

4 Comments

thanks for your valuable answer....but i did a small syntax mistakes in ng-repeat in previous plunker so that only your answer is not working to my portal so can you please look at this plunker :- plnkr.co/edit/vfRUhahWg41sLKbqSzHU?p=preview and update it....we exactly looking for the same answer in this plunker so please help me..thanks...your above answer is also useful to me...so please update this plunker...
sorry look at this plunker :- plnkr.co/edit/9mbWXEorljKEFLkREcZh?p=preview
@R.ManiSelvam As I said, there is not only a problem with the {{...}} but the problem is also because "you tried to use myquestion to filtre your datas. But you setted this value for every items in ngRepeat in the same variable. So you need to use an array or different variable depending on the ngRepeat item (or don't use ngRepeat if you have only 1 user)". Here is the correction for you plunker : plnkr.co/edit/3eMq6JotsB7M2APRxi9d?p=preview . Please try to understand what is the problem in your first plunker and if you don't, explain what are you not understanding.
Because you will not progress if you get the answer without understanding why it works..
0

If you want to filter your list dynamically then better solution would be filter data directly instead of using angular ng-repeat filter.

So all you need to do is just add $scope.filteredUsers that will be the result of filtering $scope.users each time the user chagnes radio button state. You can accomplish it bu using ng-change directive along with your radio button.

Hovewer, if you still want to filter your data using directive, you need to write your own filter. Consider looking at this question and relative solutions.

Improve this answer

6 Comments

thank you for your valuable answer, can you please update my plunker as well to know the exact solution....thanks
Private plunkers can't be edited by other users. If you have some questions, feel free to ask here. This service is intended for helping you solve you problem but not to solve it instead of you.
look at this plunker plnkr.co/edit/1Zzc6nRylgETOvQp3SI2?p=preview i already got answer for similar plunker but how can i filter using of user categories in question list can you check and update the solution ??.....
Why using ng-repeat filter is not the best solution to filter a list dynamically ?
@JeanJacques Well, actually I meant conditional filtering. ng-repeat will filter everything fine but you have to specify how exactly do you need to filter your data. The current problem is about changing the way of filtering at runtime.
|
0 

angular.module('myApp', []).controller('candidateCtrl', function($scope) {
    $scope.candidates = [
        {name:'Goutam',role:'Engineer',country:'Norway'},
        {name:'Carl',role:'Engineer',country:'Sweden'},
        {name:'Margareth',role:'Doctor',country:'England'},
        {name:'Hege',role:'Engineer',country:'Norway'},
        {name:'Joe',role:'Engineer',country:'Denmark'},
        {name:'Gustav',role:'Doctor',country:'Sweden'},
        {name:'Birgit',role:'Teacher',country:'Denmark'},
        {name:'Mary',role:'Engineer',country:'England'},
        {name:'Kai',role:'Teacher',country:'Norway'}
        ];

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">

<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row"> 
<div class="col-lg-4">
  <p>Angular JS Filter by Radio Button</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
    </label>
  </form>

</div>
</div>

<div class="row"> 
<div class="col-lg-4">
  
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Profession</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="candidate in candidates | filter:searchText:strict">
        <td>{{candidate.name}}</td>
        <td>{{candidate.role}}</td>
        <td>{{candidate.country}}</td>
      </tr>
    </tbody>
  </table>
  
</div>
</div>

</div>

Improve this answer

Comments

0 

angular.module('myApp', []).controller('candidateCtrl', function($scope) {
    $scope.candidates = [
        {name:'Goutam',role:'Engineer',country:'India'},
        {name:'Carl',role:'Engineer',country:'Sweden'},
        {name:'Margareth',role:'Doctor',country:'England'},
        {name:'Hege',role:'Engineer',country:'Norway'},
        {name:'Joe',role:'Engineer',country:'Denmark'},
        {name:'Rathin',role:'Doctor',country:'India'},
        {name:'Birgit',role:'Teacher',country:'Denmark'},
        {name:'Mary',role:'Engineer',country:'England'},
        {name:'Kai',role:'Teacher',country:'Norway'}
        ];

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <body ng-app="myApp">

<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row"> 
<div class="col-lg-4">
  <p>Angular JS Filter by Radio Button</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
    </label>
  </form>

</div>
</div>

<div class="row"> 
<div class="col-lg-4">
  
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Profession</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="candidate in candidates | filter:searchText:strict">
        <td>{{candidate.name}}</td>
        <td>{{candidate.role}}</td>
        <td>{{candidate.country}}</td>
      </tr>
    </tbody>
  </table>
  
</div>
</div>

</div>
</body>

Improve this answer

Comments

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.