如何过滤AngularJs中的无线电按钮的值

Question

单击单击按钮时如何过滤category values？

plunker

• 实际上我想过滤类别值。

例如： - 在Plunker中，我们使用data-ng-bind的类别值。有两个无线电按钮，1.Moral Ethics 2. 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>

我的控制器数据： -

 $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如下

<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

我更新您的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>

它可以正常工作。

Answer 3

您在使用Angular的无线电按钮时遇到了一些错误，因此您需要进行一些更改。以下是您视图的更新代码。

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