Angular load json文件动态onclick

Question

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

两个选项卡允许显示(onclick)"最新"或"热门"项目(每个选项卡的数据将通过JSON文件提供).默认情况下,应显示"最新"项.

加载正确的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 我向对象项添加了"日期"和"视图"属性(请参阅JSON).

1. 标签 - 我如何过滤/排序项目？"Recent"将按日期排序,"Popular"将按视图排序.
2. 类别 - 我使用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');
   };
});