角度加載json文件動態onclick

Question

我有一個簡單的頁面，顯示項目列表。數據從JSON文件中提取（URL由服務器提供）。

兩個選項卡允許顯示（onclick）「最新」或「流行」項目（每個選項卡的數據將通過JSON文件提供）。默認情況下，應該顯示「最近的」項目。

加載正確的JSON文件onclick並顯示其內容的最佳方式是什麼？

我正在考慮在標記中傳遞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值）。

感謝

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'); 
    }; 
});