Question

我有一个显示项目列表的简单页面。数据从JSON文件中提取（URL由服务器提供）。

两个选项卡允许显示（onclick）“最新”或“热门”项目（每个选项卡的数据将通过JSON文件提供）。默认情况下，应显示“最新”项目。

在onclick上加载正确的JSON文件并显示其内容的最佳方法是什么。

我在考虑在标记中传递URL（但我怀疑这是最好的方法）。我的想法：

HMTL

<ul>
  <li jsrc="recentitems.json" urlgetter>Most recent</li>
  <li jsrc="popularitems" urlgetter>Most popular</li>
</ul>

我的代码： http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview

有关如何处理它的任何建议？

修改

我稍微改变了我的做法。我现在正在发出一个HTTP请求（希望性能更好吗？）。基本上我想加载所有项目然后过滤/排序。

从你的plunker扩展：http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview 我添加了一个“日期”＆amp; “views”属性到对象项（请参阅JSON）。

的标签 - 我如何过滤/排序项目onclick？ “Recent”将按日期排序，“Popular”将按视图排序。
的分类 - 我正在使用ng-click来获取类别值，但不确定如何动态更新过滤器（使用传递的值）。

由于

Answer 1

一种方法是做一些事情： -

首先是HTML： -

   <div ng-app="App">
      <div ng-controller="tabsCtrl">
         <ul>
            <li ng-click="tab(1)">Recent items</li>
            <li ng-click="tab(2)">Popular items</li>
         </ul>
         <ul>
            <li ng-repeat='product in products'>{{product.Name}}</li>
         </ul>
         {{products || json}}
      </div>
   </div>

和JS

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

app.factory('products', function ($http, $q) {
      return {
         items: function (url) {
            //create our deferred object.
            var deferred = $q.defer();

            //make the call.
            $http.get(url).success(function (data) {
               //when data is returned resolve the deferment.
               deferred.resolve(data);
            }).error(function () {
               //or reject it if there's a problem.
               deferred.reject();
            });

            //return the promise that work will be done.
            return deferred.promise;
         }
      }
   });

app.controller("tabsCtrl", function ($scope, products) {
   $scope.products = products.items('/api/products');

   $scope.tab = function (tabIndex) {
      if (tabIndex == 1)
         $scope.products = products.items('/api/products');
      if (tabIndex == 2)
         $scope.products = products.items('/api/popularproducts');
   };
});

Angular load json文件动态onclick

1 个答案: