如何过滤 angularjs 中单选按钮的点击值？

Question

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

实际上我想过滤类别值。

例如：- 在 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

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

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>

它工作正常。

如何过滤 angularjs 中单选按钮的点击值？

How can I filter the values onclicking of radio button in angularjs?

html

angularjs

meanjs