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

一些问题/变化： -

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

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

所有

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

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

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您似乎无法找到它，有时可以重新使用您的代码。在angularjs网站上是否有一些过滤器帮助？

Tut 9, Filters

在AngularJS中过滤所有内容

2 个答案: