Создание динамического внутри ngrepeat - каждое значение href одинаково

Question

Я новичок в угловых/js. Я использую ng-repeat для повторения результатов (как элементов списка) из веб-службы. Я должен использовать некоторые из полей из результатов json для создания динамического URL-адреса, который будет использоваться на моей веб-странице для каждого элемента ng-repeat. Все повторяется отлично, за исключением моего настраиваемого 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); 
} 

вебсервис/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 для каждого результата. Веб-страница создает ссылку «Сотрудники», однако значение 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

В идеале, вы извлечение данных в службе и трансформировать все исходные данные в модель и просто использовать эти модели для заполнения Вашего мнения.