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

Я новичок в angular/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, но безуспешно. Я неправильно привязываю это или мой цикл может все испортить?

Любая помощь приветствуется!


javascript json angularjs angularjs-ng-repeat angularjs-ng-href
person clo_    schedule 04.11.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вероятно, потому что ваш цикл 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
person tymeJV    schedule 04.11.2016
comment
Спасибо @tymeJV! Я использовал ваше второе предложение, и оно работает! - person clo_; 04.11.2016

arrow_upward
0
arrow_downward

Вы должны изменить хранилище, чтобы оно содержало всю логику для удобного просмотра. Очевидно, вы могли бы использовать $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

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

person Pjetr    schedule 04.11.2016
comment
Спасибо за ваш ответ @Pjetr. Сначала я увидел ответ tymeJV и смог его успешно реализовать. - person clo_; 04.11.2016