首先,我是 angularJS 的新手,所以要温柔! 其次,我知道 angularJS 中没有“ID”、“class”等,所以标题可能有点误导。但是,我没能更好地描述这个问题。
事情是这样的:我有一个元素数组,每个元素都有其详细信息。现在,我 ng-repeat 第一组元素以显示基本信息。当用户点击“详细信息”时,会加载相应的详细信息。然而,在我的例子中,每个项目都获得了所选元素的详细信息。
实践案例:http://jsbin.com/zilayija/2/edit
有什么方法可以将相应的详细信息附加到仅匹配 Id 的信息中吗?
最佳答案
这里真正的问题是您将详细信息绑定(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")
];
关于javascript - AngularJS:针对特定的 "ID"进行 ng-repeat?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23383835/