Question

首先，我对angularJS很新，所以要温柔！其次，我知道angularJS中没有“ID”，“class”等，所以标题可能有点误导。但是，我没有更好地描述这个问题。

这是交易：我有一系列元素，每个都有它的细节。现在，我重复第一组元素来显示基本信息。当用户点击“详细信息”时，会加载相应的详细信息。然而，就我而言，每个项目都会获得所选元素的详细信息。

实践中的案例：http://jsbin.com/zilayija/2/edit

有没有办法将相应的细节附加到仅与Id匹配的细节上？

Answer 1

我想你想归档一个主/详细视图。您需要在ng-repeat之外显示详细信息。您还不需要数组来获取详细信息。只需使用范围内的对象并将其分配到getDetails。

http://jsbin.com/heyaqexa

Answer 2

这里的真正问题是您将详细信息绑定到$ scope上的单个数组，即details。由于此引用用于ng-repeat的每次迭代，因此您最终会在任何地方显示它。

修改：正如评论中所提到的，原始问题并没有反映出实际问题。要求的是，细节需要异步加载，并且仅在请求（单击）时才加载。因此，我更新了the code example）。

改变了什么？

HTML：

<li ng-repeat="item in items">
    {{item.name}}
    <a href="" ng-click="item.showDetails()">show details</a>
    <p ng-show="item.detailsVisible" ng-repeat="detail in getDetails(item.id)">
        {{detail.belongsToItem}}
    </p>
</li>

JS：

var Item = function(id, name){
    var promiseDetailsAreLoaded;
    var self = this;

    this.id = id;
    this.name = name;
    this.detailsVisible = false;
    this.details = [];
    this.showDetails = function(){
        if(!promiseDetailsAreLoaded){
          promiseDetailsAreLoaded = $http.get("").then(function(){
              // mock adding details
              for(var i = 0; i < itemDetails.length; i++){
                  if(itemDetails[i].belongsToItem === self.id){
                      self.details.push(itemDetails[i]);
                  }
              }
          });
        }
        promiseDetailsAreLoaded.then(function(){
            self.detailsVisible = !self.detailsVisible;  
        });
    }
};

$scope.items = [
  new Item(1, "Item 1"),
  new Item(2, "Item 2"),
  new Item(3, "Item 3")
];

AngularJS：针对特定“ID”的ng-repeat？

2 个答案: