全部过滤 AngularJS

Question

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

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

Answer 1

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

Tut 9, Filters

Answer 2

一些issues/changes:-

不要使用 ng-value 插值，即 ng-value="{{categoryItem.id}}" 应该是 ng-value="categoryItem.id"。 ng-value 可以只是将分配给 ng-model 的表达式或范围属性。
不要使用ng-init or $parent on the view, they are not desired patterns to use. 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>

全部过滤 AngularJS

Filter all in AngularJS

javascript

filter

angularjs

angularjs-scope