在 AngularJS ng-repeat 中过滤 "custom values"

Question

我需要按类别过滤列表，但每个类别都是自定义的，每个用户都可以在列表中写下他们想要的任何类别。

我试图用 ng-repeat 创建一个列表，在其中我过滤了所有重复的值（在下面的代码中是 unique:'Category' 部分），我给了他们类别名称作为要过滤的值，我还添加了一个 "All" 类别来显示所有元素：

<ul class="categoriesList">
  <li>
    <label>
      <input type="radio" ng-model="searchCategory.Category" value=""> All
    </label>
  </li>
  <li ng-repeat="x in myList | unique:'Category'">
    </label>
      <input type="radio" ng-model="searchCategory.Category" value="{{x.Category}}"> {{x.Category}}
    </label>
  </li>
</ul>

但这种方法行不通。我做了一个 Plunker 作为例子：Here is my plunker

我需要能够在 json 示例中添加我想要的任何类别，并且能够过滤它们。提前致谢。

Answer 1

好的，您的代码的问题只是您的属性 searchCategory 未在 $scope 上定义。将 $scope.searchCategory = {}; 添加到您的控制器将解决问题。这背后的原因是 ng-repeat 创建了自己的子作用域。以下是工作解决方案的片段。

还缺少一件事，即您需要为所有单选按钮设置相同的组，以便一次只选择一个，您可以通过添加 name='filter' 属性来实现所有单选按钮。

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

//duplicates filter
app.filter('unique', function() {
  return function(items, filterOn) {
    if (filterOn === false) {
      return items;
    }

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var hashCheck = {},
        newItems = [];
      var extractValueToCompare = function(item) {
        if (angular.isObject(item) && angular.isString(filterOn)) {
          return item[filterOn];
        } else {
          return item;
        }
      };
      angular.forEach(items, function(item) {
        var valueToCheck, isDuplicate = false;
        for (var i = 0; i < newItems.length; i++) {
          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          newItems.push(item);
        }
      });
      // items = newItems;
    }
    return newItems;
  };
});

app.controller('MainCtrl', function($scope) {
  $scope.searchCategory = {};
  $scope.myList = [{
      "Category": "My custom category",
      "Title": "Title example",
      "Comments": "Example comments"
    },
    {
      "Category": "My custom category",
      "Title": "My cat is named George",
      "Comments": "Example comments"
    },
    {
      "Category": "My custom category",
      "Title": "Hocus pokus",
      "Comments": "Example comments"
    },
    {
      "Category": "My custom category",
      "Title": "Tyrion Lannister must have been king",
      "Comments": "Example comments"
    },
    {
      "Category": "My custom category",
      "Title": "some text",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "7 projects going LIVE now",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "Batman vs Superman was a good movie",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "Youtube channel projects",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "Some project name",
      "Comments": "Example comments"
    },
    {
      "Category": "Some new category",
      "Title": "projects (more)",
      "Comments": "Example comments"
    },
    {
      "Category": "A different category",
      "Title": "Remember, remember the fifth of november",
      "Comments": "Hello there!"
    },
    {
      "Category": "A different category",
      "Title": "It's night, electric night",
      "Comments": "General Kenobi"
    },
    {
      "Category": "Custom category",
      "Title": "project name again",
      "Comments": "Example comments"
    }
  ];

});

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

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

<body ng-controller="MainCtrl">
  <ul class="categoriesList">
    <li>
      <label>
          <input name="filter" type="radio" ng-model="searchCategory.Category" ng-value=""> All
        </label>
    </li>
    <li ng-repeat="x in myList | unique:'Category'">
      <label>
          <input name="filter" type="radio" ng-model="searchCategory.Category" ng-value="x.Category"> {{x.Category}}
        </label>
    </li>
  </ul>

  <div class="wrapper" ng-repeat="y in myList | filter:searchCategory:true">
    <ul class="click-text">
      <li>{{y.Title}} - {{y.Comments}}</li>
    </ul>
  </div>
</body>

</html>

希望对您有所帮助:)

Answer 2

您必须为单选按钮编写 Ex- name="rdoCategory" 属性

`<ul class="categoriesList">
      <li>
        <label>
          <input type="radio" name="rdoCategory" ng-model="searchCategory.Category" value=""> All
        </label>
      </li>
      <li ng-repeat="x in myList | unique:'Category'">
        </label>
          <input type="radio" name="rdoCategory" ng-model="searchCategory.Category" value="{{x.Category}}"> {{x.Category}}
        </label>
      </li>
    </ul>`

之后就可以了。

在 AngularJS ng-repeat 中过滤 "custom values"

Filter "custom values" in AngularJS ng-repeat

javascript

angularjs

angular-filters