1

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

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

在单击时加载正确的 JSON 文件并显示其内容的最佳方式是什么。

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

HMTL

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

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

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

编辑

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

从您的 plunker 扩展：http ://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview 我向对象项添加了“日期”和“视图”属性（参见 JSON）。

  1. 选项卡 - 我如何过滤/排序 onclick 项目？“最近”将按日期排序，“热门”将按观看次数排序。
  2. 类别 ——我正在使用 ng-click 来获取类别值，但不确定如何动态更新过滤器（使用通过 onclick 传递的值）。

谢谢

4

1 回答 1

7

一种方法是执行以下操作：-

首先是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');
   };
});
于 2013-04-29T19:14:34.857 回答