时间戳

首页 > 解决方案 > 过滤具有不同值的单选按钮（AngularJS）？

angularjs - 过滤具有不同值的单选按钮（AngularJS）？

问题描述

我有一个要使用单选按钮过滤的项目列表，这是我的数组的一个示例：

$scope.items = [
  {
    "name":"person 1",
    "section":"one",
    "job":false
  },
  {
    "name":"person 2",
    "section":"two",
    "job":true
  },
  {
    "name":"person 3",
    "section":"one",
    "job":false
  },
  {
    "name":"person 4",
    "section":"one",
    "job":true
  }
];

在我的 HTML 中，我有一个ng-repeat列表，我想用单选按钮过滤它：

<div class="menu">
   <label>
      <input type="radio" ng-model="filteradio.section" value="">
      <p>All</p>
   </label>

   <label>
      <input type="radio" ng-model="filteradio.section" value="one">
      <p>Section 1</p>
   </label>

   <label>
      <input type="radio" ng-model="filteradio.section" value="two">
      <p>Section 2</p>
   </label>

   <label>
      <input type="radio" ng-model="filteradio.job" value="true">
      <p>People with job</p>
   </label>
</div>

<table>
   <tr>
      <td>Name</td>
      <td>Section</td>
      <td>Job</td>
   </tr>
   <tr ng-repeat="item in items | filter:filteradio:strict">
      <td>{{item.name}}</td>
      <td>{{item.section}}</td>
      <td ng-if="item.job">yes</td>
   </tr>
</table>

问题是最后一个单选按钮不起作用，因为当我选择带有“filteradio.section”的按钮时，它们可以正常工作，但是一旦我单击“filteradio.job”，其他单选按钮就会保持选中状态！
我尝试向所有单选按钮添加相同的“名称属性”，但是一旦我单击“filteradio.job”，所有项目都会消失。
如何按“部分”以及“是否有工作”过滤它们？有没有更简单的方法来解决这个问题？

标签： angularjsfilterradio-button

解决方案

我在下面提供了一个工作示例，但我将介绍一些值得注意的点：

  • ng-model如果选项不是互斥的，您的所有无线电输入都应该绑定到相同的，否则您最终可能会处于选择多个无线电输入的状态
  • 要在表上实现您需要的过滤：
    • 跟踪过滤器结构，该结构存储要过滤的项目属性和值
    • 用于ng-change根据需要更新此过滤器结构
    • 使用利用过滤器结构的自定义过滤器比较器
  • 注意一些无线电输入使用ng-value而不是value，后面的值将始终被解释为字符串文字

angular
  .module('app', [])
  .controller('ctrl', function ($scope) {
    var radioFilter = {
      prop: 'section',
      value: null,
    };
    $scope.items = [
      {
        name: 'person 1',
        section: 'one',
        job: false,
      },
      {
        name: 'person 2',
        section: 'two',
        job: true,
      },
      {
        name: 'person 3',
        section: 'one',
        job: false,
      },
      {
        name: 'person 4',
        section: 'one',
        job: true,
      }
    ];
    $scope.radio = null;
    $scope.radioChanged = function (prop) {
      radioFilter = {
        prop: prop,
        value: $scope.radio,
      };
    };
    $scope.filterByRadio = function (item) {
      return $scope.radio === null || item[radioFilter.prop] === $scope.radio;
    };
  });
<div ng-app="app" ng-controller="ctrl">
  <div>
     <label>
        <input type="radio" ng-model="radio" ng-change="radioChanged('section')" ng-value="null"> All
     </label>
     <label>
        <input type="radio" ng-model="radio" ng-change="radioChanged('section')" value="one"> Section 1
     </label>
     <label>
        <input type="radio" ng-model="radio" ng-change="radioChanged('section')" value="two"> Section 2
     </label>
     <label>
        <input type="radio" ng-model="radio" ng-change="radioChanged('job')" ng-value="true"> People with job
     </label>
  </div>
  <table>
    <tr>
      <td>Name</td>
      <td>Section</td>
      <td>Job</td>
    </tr>
    <tr ng-repeat="item in items | filter:filterByRadio">
      <td>{{ item.name }}</td>
      <td>{{ item.section }}</td>
      <td>{{ item.job ? "yes" : "" }}</td>
    </tr>
  </table>
</div>
<script src="https://unpkg.com/angular@1.7.4/angular.min.js"></script>

推荐阅读