動的なngrepeatの作成 - すべてのhref値が同じです

Question

私はangular/jsより新しいです。私は、Webサービスから結果を（リスト項目として）繰り返すためにng-repeatを使用しています。 jsonの結果からいくつかのフィールドを使用して、各ng-repeatアイテムのWebページで使用する動的URLを作成する必要があります。私のカスタムURLを除いてすべてがうまく繰り返されます。

サイドノート、ページごとに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は、各結果の正しいURLを返します。 WebページはEmployeesリンクを作成しますが、すべての結果項目の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

理想的には、サービス内のデータを取得し、モデルにすべての生データを変換し、単にあなたのビューを移入するためにこれらのモデルを使用します。