Как я могу отфильтровать значения при нажатии переключателя в angularjs?

Question

Как я могу фильтровать category values при нажатии на переключатель?

Plunker

• На самом деле я хочу, чтобы фильтровать значения категорий.

Для примера: - в plunker мы отобразили значения категорий, используя в data-ng-bind. есть два переключателя, 1.Moral Ethics2. Religion & Culture. если мы щелкнем по первому переключателю moral ethics, то это должно быть filter только moral ethis values, и если мы нажмем второй переключатель religon & Culture, он должен filter только religon & Culture values. ,

Моя кнопка HTML радио: -

<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> 

Мой HTML Фильтр: -

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

Мой Html данных: -

<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" 
    } 
] 

• пожалуйста, смотрите мой plunker для справки и помочь мне .. пожалуйста, обновите plunker, а знать точное решение ... спасибо.

Answer 1

Изменение значения флажок, как показано ниже, это он

<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" > 

и ваш повторил ДИВ ниже

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

    </div> 

, а также, пожалуйста, найти обновленный plunker

Answer 2

У вас есть какие-то ошибки используя радиокнопки в угловом, поэтому вот некоторые изменения, которые вам нужно сделать. Ниже приведен обновленный код для вашего просмотра.

<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> 

Answer 3

Я обновить Plunker

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

для этого:

<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> 

он работает отлично.