可以说,我正在使用 ng-repeat | 重复
,(也可以说我有 5000 个)div
limitTo:6
当我点击div时,div将被删除。然后将只显示 5 个项目。
如何编辑它,以便当删除 ng-repeat 列表中的某个项目时,将显示下一个项目?
<div class = "col-xs-12">
<!-- selectingUser(user) ; -->
<div ng-if="!user.isSelected" data-ng-click = "selectingUser(user)" data-ng-repeat="user in users " > <!-- | filter:$select.search -->
<img class="img-circle" data-ng-src ="{{user.image}}" width="8%"/>
<span data-ng-bind-html="user.name" ></span>
</div>
</div>
如您所见,仅当 user.isSelected = false
时才会显示 div
最佳答案
你看起来像这样吗?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in sampleArray | limitTo:5" ng-click="removeItem($index)">{{item}}</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.sampleArray = ["Obj1", "Obj2", "Obj3", "Obj4", "Obj5", "Obj6", "Obj7", "Obj8", "Obj9", "Obj10"];
$scope.removeItem = function(index){
console.log("removing item at" + (index+1));
$scope.sampleArray.splice(index, 1);
}
});
</script>
</body>
</html>
只需将 Angular limitTo
属性与 ng-repeat
结合使用即可。删除元素时会自动调整内容
关于javascript - 使用 limitTo 更改/更新 ng-repeat 中的项目数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45348541/