Question

单击单选按钮时，如何在列表中过滤category values？

其实我想过滤问题列表中的类别值。
我们在plunker中有用户数据和问题数据。
用户有两个categories，例如"categories": ["Religion & Culture","Social Psychology"],。
问题在列表中有各种category。
我希望仅在该问题类别列表中过滤用户categories值。

例如： - 在plunker中我们使用ng-repeat显示了类别值。使用两个单选按钮1.Religion & Culture 2. Social Psychology显示用户类别数组值。如果我们点击Religion & Culture的第一个单选按钮，它应filter只有问题列表中的Religion & Culture，如果我们点击Social Psychology它的第二个单选按钮＆＃ 39; s应该filter只有religon & Culture values个问题列表。

我的HTML单选按钮： -

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

我的HTML过滤器： -

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

我的Html数据：

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

 </div>

我的控制器用户数据： -

    $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": "sarawana@gmail.com",
"categories": [
"Religion & Culture",
"Social Psychology"
],
"lastName": "kumar",
"firstName": "sarawana"
}]

我的问题数据： -

    $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供参考。
我们不知道我在哪里犯了错误，所以请查看我的plunker以供参考并帮助我..请更新plunker以了解确切的解决方案......谢谢。
我已经创建了类似的答案请检查这个plunker http://plnkr.co/edit/1Zzc6nRylgETOvQp3SI2?p=preview我正在寻找相同的答案在这个过滤值的过滤器，但我想过滤用户类别数组值.....

Answer 1

请参阅此内容，我们将改进代码和过滤

code

我写了这个方法

$scope.changed = function (category) {
  $scope.result = [];
  angular.forEach($scope.questions, function(question) {
    if(question.category === category) {
      $scope.result.push(question);
    }
  });
};

Answer 2

我认为问题只是因为您在ngValue中使用了{{...}}，这是不必要的。

您还尝试使用myquestion来过滤数据。但是，您为同一变量中ngRepeat中的每个项目设置了此值。因此，您需要使用数组或不同的变量，具体取决于ngRepeat项（如果您只有1个用户，则不要使用ngRepeat），如下所示：

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

查看this plunker

Answer 3

如果您想动态过滤列表，那么更好的解决方案是直接过滤数据，而不是使用角度ng-repeat过滤器。

所以你需要做的只是添加$scope.filteredUsers，这是每次用户选择单选按钮状态时过滤$scope.users的结果。您可以使用ng-change指令和单选按钮来完成它。

Hovewer，如果您仍想使用指令过滤数据，则需要编写自己的过滤器。考虑一下这个question和相关解决方案。

Answer 4

[9, 6, 3, 1, 2, 4, 5, 7, 8, 10]

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'}
        ];

});

Answer 5

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>

如何过滤ng-repeat列表值在Angularjs中单击单选按钮？

5 个答案: