在 AngularJS 中过滤所有内容答案

【问题标题】：Filter all in AngularJS在 AngularJS 中过滤所有内容
【发布时间】：2023-03-29 11:25:01
【问题描述】：

我是 AngularJS 的初学者，我有一个问题，这里是我的代码：

$scope.categories = [{
    "id": 506,
    "name": "test"
}, {
    "id": 510,
    "name": "aaa"
}, {
    "id": 1,
    "name": "bbb"
}, {
    "id": 2,
    "name": "ccc"
}, {
    "id": 3,
    "name": "eee"
}, {
    "id": 4,
    "name": "fff"
}];

$scope.contents = [{
    "id": 0,
    "categoryId": 506,
    "title": "test1"
}, {
    "id": 1,
    "categoryId": 506,
    "title": "test2"
}, {
    "id": 2,
    "categoryId": 506,
    "title": "test3"
}, {
    "id": 3,
    "categoryId": 1,
    "title": "test4"
}];

<div>
    <label>
        <input type="radio" name="category" ng-model="cc" ng-value="" checked/>all
    </label>

    <label ng-repeat="categoryItem in categories" ng-init="i= $parent">
        <input type="radio" name="category" ng-model="i.cc" ng-value="{{categoryItem.id}}" />{{categoryItem.id}}
    </label>
</div>

<ul>
    <li ng-repeat="content in contents | filter:{categoryId: cc||undefined}">
        <h3>id:{{content.categoryId}}</h3>
        <p>{{content.title}}</p>
    </li>
</ul>

我希望能够通过选择单选来查看所有项目，此外，我希望始终选择其中的第一个。就像现在它不起作用，我真的不知道为什么。

【问题讨论】：

标签： javascript angularjs filter angularjs-scope

【解决方案1】：

一些问题/更改：-

不要使用带有 ng 值的插值，即 ng-value="{{categoryItem.id}}" 应该是 ng-value="categoryItem.id"。 ng-value 可以只是将分配给 ng-model 的表达式或范围属性。
不要在视图上使用ng-init 或$parent，它们不是想要使用的模式。 Instead use dot rule。在控制器中定义过滤器对象，并将过滤器对象上的属性 categoryId 设置为单选按钮的 ng-model。

<input type="radio" name="category" ng-model="categoryFilter.categoryId" ng-value="categoryItem.id" />{{categoryItem.id}}
只需通过点击all 过滤器将categoryFilter 设置为{} 来清除过滤器，然后使用ng-checked。

全部

只需使用带有 ng-repeat 的过滤器，如下所示：

 <li ng-repeat="content in contents | filter:categoryFilter">

演示

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.categoryFilter = {};
  $scope.categories = [{
    "id": 506,
    "name": "test"
  }, {
    "id": 510,
    "name": "aaa"
  }, {
    "id": 1,
    "name": "bbb"
  }, {
    "id": 2,
    "name": "ccc"
  }, {
    "id": 3,
    "name": "eee"
  }, {
    "id": 4,
    "name": "fff"
  }];
  $scope.clearFilter = function() {
    $scope.categoryFilter = {};
  }
  $scope.contents = [{
    "id": 0,
    "categoryId": 506,
    "title": "test1"
  }, {
    "id": 1,
    "categoryId": 506,
    "title": "test2"
  }, {
    "id": 2,
    "categoryId": 506,
    "title": "test3"
  }, {
    "id": 3,
    "categoryId": 1,
    "title": "test4"
  }];


});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.2.23/angular.js" data-semver="1.3.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div>
    <label>
      <input type="radio" name="category1" ng-click="categoryFilter={}" ng-checked="!categoryFilter.categoryId" />all
    </label>

    <label ng-repeat="categoryItem in categories">
      <input type="radio" name="category" ng-model="categoryFilter.categoryId" ng-value="categoryItem.id" />{{categoryItem.id}}
    </label>
  </div>

  <ul>
    <li ng-repeat="content in contents | filter:categoryFilter">
      <h3>id:{{content.categoryId}}</h3>
      <p>{{content.title}}</p>
    </li>
  </ul>
</body>

</html>

【讨论】：

感谢您的全面回答。现在一切都清楚了

【解决方案2】：

如果您似乎找不到代码，有时最好从代码重新开始。 angularjs网站上没有过滤器帮助吗？

Tut 9, Filters

【讨论】：

我从一开始就以不同的方式尝试了好几次。这个好像是最好的，不然全选是不行的。