【问题标题】：AngularJS. Filters角JS。过滤器
【发布时间】：2014-09-08 20:49:23
【问题描述】：

试图理解 AngularJS 中的文件管理器。我有以下代码将文章从 JSON 播种到主页。

<div ng-repeat='article in articlesList | filter:filters'>
  <span>{{article.category}}</span>
  <h1>{{article.title}}</h1>
  <p>{{article.short_desc}}</p>
</div>

我也有导航，我想将其用作过滤器，因此它不会转到新页面，而是按类别从主页中过滤掉文章。

  <ul>
    <li>
      <a ng-click="filters.category = 'home'">Home</a>
    </li>
    <li>
      <a ng-click="filters.category = 'activity'">Home</a>
    </li>
  </ul>

我的 JSON 看起来像这样

{

    "article1": {
        "id":"1",
        "category": "home",
        "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        "short_desc": "Nemo enim ipsam voluptatem quia voluptas sit",
        "images": [
            "img/article-img1.jpg"
        ]
    },

    "article2": {
        "id":"2",
        "category": "activity",
        "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
        "short_desc": "Nemo enim ipsam voluptatem quia voluptas sit",
        "images": [
            "img/article-img2.jpg"
        ]
    },

}

我正在使用这个控制器从中获取数据

app.controller('HomeCtrl', function($scope, $http) {
    $http.get('pages/articles.json')
        .success(function(data) {
            $scope.filters = {}
            $scope.articlesList = data;
        })
        .error(function(data) {
            alert('Something is wrong with JSON')
        })
});

我正在尝试找出设置过滤器的正确方法。正在寻找解决类似问题的解决方案或一些文章。

或者过滤可能不是此任务的最佳选择。我感谢任何建议/最佳做法。

【问题讨论】：

ng-repeat='article in articlelist | filter:categoryFilter' 除非我误解了这个问题。您的花括号之一也在您的 ng-click 的引号之外

标签： angularjs filter

【解决方案1】：

我一直在修改我的评论，所以我想我会回答这个问题。

为了使用您的过滤器，您需要执行以下操作：

<div ng-repeat='article in articlesList | filter:categoryFilter'>
  <span>{{article.category}}</span>
  <h1>{{article.title}}</h1>
  <p>{{article.short_desc}}</p>
</div>

然后，在您的导航栏中（假设它们具有相同的范围，如果不是，那么答案会略有不同），您将执行类似于此的操作：

<ul>
    <li>
      <a href="" class="active" ng-click="categoryFilter.category=1">Home</a>
    </li>
    <li>
      <a href="" ng-click="categoryFilter.category=2">Press</a>
    </li>
  </ul>

我没有任何数据可以彻底测试这一点。如果它不起作用，请在 JSON 数组中提供一些 (~5) 对象，以便我可以在 plunkr 上对其进行测试。你的 body 标签中的 HTML 也会有很大帮助。

Here 是过滤器的 API 文档，其中提供了一些示例，可以帮助您进一步了解过滤器。

编辑

自从你更新了你的信息，我得到了This Plunkr 的工作。

我会分解每个部分：

HTML

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

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="dataCtrl">
    <nav>
      <a ng-click="categoryFilter.category='Home'">Home</a>
      <a ng-click="categoryFilter.category='Activity'">Activity</a>
      <a ng-click="resetCategoryFilter()">Reset</a>
      
      <span style="float:right;"><input type="text" ng-model="categoryFilter.title"></span>
    </nav>
    Your Current Filters Applied Are: {{categoryFilter}}
    <div ng-repeat="item in data | filter:categoryFilter">
      {{item.title}}
    </div>
    
  </body>

</html>

现在对于 HTML，您会看到我只设置了 1 个控制器。这使得所有这些项目都在同一个父项中。如果你有一个包装 DIV，我建议将 ng-controller 放在那个 div 上。

您会注意到我没有将元素放在<ul> 或<li> 标记中。那是因为我忘记了。它应该仍然可以在它们内部工作。

话虽如此，您会注意到我的代码始终使用 $scope 变量。您似乎对 $scope 变量有基本的工作知识，所以我将不理会它。一件事是我添加到范围的函数，resetCategoryFilters() 函数。这是一个足够简单的函数：它获取所有键并将它们的值设置为未定义，以便将过滤器对象重置为基础。我在范围内初始化了 categoryFilters，因为......好吧我不确定，如果我不这样做，它只会困扰我。

Javascript

// 代码在这里

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

app.controller('dataCtrl',function($scope){
  $scope.categoryFilter = {
    category:undefined,
    title:undefined,
    short_desc:undefined
  };
  
  $scope.resetCategoryFilter = function(){
    for(var x in $scope.categoryFilter){
      $scope.categoryFilter[x]=undefined;
    }
  }
  
  $scope.data = [
    {
        "id":"1",
        "category": "Home",
        "title": "20 Useful Things around your House",
        "short_desc": "Nemo enim ipsam voluptatem quia voluptas sit",
        "images": [
            "img/article-img1.jpg"
        ]
    },

     {
        "id":"2",
        "category": "Activity",
        "title": "Carpe the Diem",
        "short_desc": "Nemo enim ipsam voluptatem quia voluptas sit",
        "images": [
            "img/article-img2.jpg"
        ]
    }


    ];//Here, instead of hard-coding the data like I did, use the $http service to get the values
});

您会注意到我只是在哪里对数据进行了硬编码。因为我使用的是 Plunkr，所以我可以在不同的页面中设置这些数据，但在那里更容易。使用 $http 服务和 .get 方法填充 $scope.data 数组。

关于您的 Javascript 的备注

我注意到您提供的 JSON 中的索引是硬编码的。我删除了它们，使data 对象成为对象数组，而不是对象对象。遍历数组容易，遍历对象难。

希望这能回答你的问题。

【讨论】：

我已经更新了数据。我已经发布了我用来从中获取数据的 JSON 和控制器，现在我需要一种方法来使用 ng-click 和 filter 过滤该数据。
非常感谢您的解决方案和解释。我会继续学习:)