javascript - AngularJS:针对特定的 "ID"进行 ng-repeat？

Question

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

事情是这样的:我有一个元素数组，每个元素都有其详细信息。现在，我 ng-repeat 第一组元素以显示基本信息。当用户点击“详细信息”时，会加载相应的详细信息。然而，在我的例子中，每个项目都获得了所选元素的详细信息。

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

有什么方法可以将相应的详细信息附加到仅匹配 Id 的信息中吗？

Answer 1

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

编辑:如评论中所述，原始问题并未反射(reflect)实际提出的问题。所要求的是需要异步加载详细信息，并且仅在请求(单击)时才加载。因此我更新了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")
];