在 ngrepeat 中创建动态 - 每个 href 值都相同

Question

我是 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);
}

webservice/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 returns 每个结果的正确 URL。该网页创建了 Employees link，但是，每个结果项的 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

理想情况下，您在服务中检索数据并将所有原始数据转换为模型，然后简单地使用这些模型来填充您的视图。

在 ngrepeat 中创建动态 - 每个 href 值都相同

Creating dynamic inside ngrepeat - every href value is the same

javascript

json

angularjs

angularjs-ng-repeat

angularjs-ng-href