修改

Question

尝试了解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')
        })
});

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

或者过滤不是此任务的最佳选择。我感谢任何建议/最佳实践。

Answer 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上测试它。你身体标签中的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()函数。这是一个足够简单的函数：它接受所有键并将其值设置为undefined，以便filter对象重置为base。我在范围内初始化了类别过滤器，因为......我不确定，如果我不这样做，它就会让我烦恼。

的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对象成为一个对象数组，而不是对象对象。容易在数组中循环，难以在对象中循环。

希望这能回答你的问题。

AngularJS。过滤器

1 个答案:

修改

HTML

的Javascript

备注关于您的Javascript