如何过滤 ng-repeat 列表值 Onclicking Angularjs 中的单选按钮？答案

【问题标题】：How to Filter ng-repeat list values Onclicking of Radio Button in Angularjs?如何过滤 ng-repeat 列表值 Onclicking Angularjs 中的单选按钮？
【发布时间】：2017-11-16 15:01:33
【问题描述】：

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

My Plunker

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

例如：- 在 plunker 中，我们使用 ng-repeat 显示类别值。用户类别数组值使用两个单选按钮显示，1.Religion & Culture2. Social Psychology。如果我们单击Religion & Culture 的第一个单选按钮，那么filter 应该只有问题列表中的Religion & Culture，如果我们单击Social Psychology 的第二个单选按钮，它应该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 我正在这个 plunker 过滤值中寻找相同的答案，但我想过滤用户类别数组值.....

【问题讨论】：

标签： html angularjs meanjs

【解决方案1】：

请参考这里，我们将改进代码和过滤

code

这个方法是我写的

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

【讨论】：

嗨，感谢您的宝贵回答，我正在寻找下面给出的类似答案，所以您可以检查一下并更新解决方案....请更新这个 plunker :- plnkr.co/edit/9mbWXEorljKEFLkREcZh?p=preview 也知道确切的解决方案

【解决方案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

【讨论】：

感谢您的宝贵回答....但我在以前的 plunker 中的 ng-repeat 中犯了一个小语法错误，所以只有您的答案对我的门户不起作用，所以请您看看这个 plunker :- plnkr.co/edit/vfRUhahWg41sLKbqSzHU?p=preview 并更新它....我们在这个 plunker 中寻找相同的答案所以请帮助我..谢谢...您的上述答案对我也很有用...所以请更新这个 plunker.. .
对不起，看看这个笨蛋：- plnkr.co/edit/9mbWXEorljKEFLkREcZh?p=preview
@R.ManiSelvam 正如我所说，{{...}} 不仅存在问题，而且问题还在于“您尝试使用 myquestion 过滤您的数据。但是您设置了这个ngRepeat 中的每个项目在同一变量中的值。因此，您需要根据 ngRepeat 项目使用数组或不同的变量（或者如果您只有 1 个用户，则不要使用 ngRepeat）“。这是给你的更正：plnkr.co/edit/3eMq6JotsB7M2APRxi9d?p=preview。请尝试了解您的第一个 plunker 中存在什么问题，如果不了解，请解释您不了解什么。
因为如果你在不理解它为什么起作用的情况下得到答案，你就不会进步..

【解决方案3】：

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

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

但是，如果您仍想使用指令过滤数据，则需要编写自己的过滤器。考虑查看此question 和相关解决方案。

【讨论】：

感谢您的宝贵回答，能否请您更新我的 plunker 以了解确切的解决方案....谢谢
私人插件不能被其他用户编辑。如果您有任何问题，请随时在这里提问。此服务旨在帮助您解决问题，但不是代替您解决问题。
看看这个 plunker plnkr.co/edit/1Zzc6nRylgETOvQp3SI2?p=preview 我已经得到了类似 plunker 的答案但是我如何过滤使用问题列表中的用户类别你可以检查和更新解决方案吗??.....跨度>
为什么使用ng-repeat 过滤器不是动态过滤列表的最佳解决方案？
@JeanJacques 好吧，实际上我的意思是条件过滤。 ng-repeat 将过滤所有内容，但您必须指定您需要如何过滤数据。当前的问题是关于在运行时改变过滤方式。

【解决方案4】：

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>

【讨论】：

【解决方案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>

【讨论】：