創建動態內部ngrepeat - 每個href的值是一樣的

Question

我更新角/ js。我正在使用ng-repeat從Web服務重複結果（作爲列表項）。我必須使用json結果中的一些字段來創建一個動態URL，以便在我的網頁上爲每個ng-repeat項目使用。除了我的自定義網址，所有內容都可以重複使用。

附註，我也在做分頁 - 每頁5個列表項。這工作正常。

控制器片斷：

$scope.stores = response.data; 
$scope.jsonSize = $scope.stores.length; 

for (var i = 0; i<=$scope.jsonSize - 1; i++) { 
    $scope.storeSize = $scope.stores[i].SIZE; 
    $scope.empCount = $scope.stores[i].EMPLOYEE_COUNT; 
    $scope.customUrl = 'http://test.com/' + $scope.storeSize + ',' + $scope.empCount; 
    console.log("custom url is " + $scope.customUrl); 
} 

web服務/ JSON片段：

[{"STORE_ID":"001","SIZE":1000,"EMPLOYEE_COUNT":45}, 
{"STORE_ID":"002","SIZE":500,"EMPLOYEE_COUNT":25}, 
{"STORE_ID":"003","SIZE":750,"EMPLOYEE_COUNT":40}] 

玉片斷：

li(ng-repeat="store in stores | startFrom:currentPage*pageSize | limitTo:pageSize") 
    .store-link 
     a(ng-href="{{customUrl}}" target="_blank") Employees 

我的console.log返回每個結果的正確網址。該網頁創建員工鏈接，但是，每個結果項的href值最終結果爲http://test.com/750,40。

我試過ng-click並把URL放入函數中。我也嘗試過href和ng-href，沒有任何運氣。我沒有正確地綁定這個或者我的循環可能會搞砸了嗎？

任何幫助將不勝感激！

Answer 1

可能是因爲您的for循環覆蓋了每個循環的$scope.customUrl。使它成爲一個集合，追加到它，然後使用：

$scope.customUrls = []; 
for (var i = 0; i<=$scope.jsonSize - 1; i++) { 
    $scope.storeSize = $scope.stores[i].SIZE; 
    $scope.empCount = $scope.stores[i].EMPLOYEE_COUNT; 
    var url = 'http://test.com/' + $scope.storeSize + ',' + $scope.empCount; 
    $scope.customUrls.push(url); 
    console.log("custom url is " + $scope.customUrls[i]); 
} 

和視圖：

li(ng-repeat="store in stores | startFrom:currentPage*pageSize | limitTo:pageSize") 
.store-link 
    a(ng-href="{{customUrls[$index]}}" target="_blank") Employees 

什麼可能是更好的是隻是一個屬性添加到您的店鋪收藏的URL：

for (var i = 0; i<=$scope.jsonSize - 1; i++) { 
    $scope.storeSize = $scope.stores[i].SIZE; 
    $scope.empCount = $scope.stores[i].EMPLOYEE_COUNT; 
    var url = 'http://test.com/' + $scope.storeSize + ',' + $scope.empCount; 
    $scope.stores[i].url = url; 
    console.log("custom url is " + $scope.stores[i].url); 
} 

li(ng-repeat="store in stores | startFrom:currentPage*pageSize | limitTo:pageSize") 
.store-link 
    a(ng-href="{{store.url}}" target="_blank") Employees 

Answer 2

您應該修改商店以包含所有邏輯以便於查看。您可以明顯使用$index來查看不同的數組，但就我而言，這不是一個真正合乎邏輯的方法。

$scope.stores = response.data.map(function(storeData) { 
 
    return { 
 
    storeSize: storeData.SIZE, 
 
    empCount: storeData.EMPLOYEE_COUNT, 
 
    url: 'http://test.com/' + storeData.SIZE + ',' + storeData.EMPLOYEE_COUNT; 
 
    }; 
 
});

li(ng-repeat="store in stores | startFrom:currentPage*pageSize | limitTo:pageSize") 
 
.store-link 
 
    a(ng-href="{{ store.url }}" target="_blank") Employees

理想情況下，你在服務中檢索數據，所有的原始數據轉化爲模型，簡單地用這些模型來填充你的看法。