javascript - 使用 limitTo 更改/更新 ng-repeat 中的项目数量

标签 javascript angularjs angularjs-ng-repeat angularjs-limitto

可以说,我正在使用 ng-repeat | 重复 div limitTo:6 ,(也可以说我有 5000 个)

当我点击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/

相关文章:

javascript - 如何在onclick按钮传递函数的js函数中传递字符串第二个参数?

javascript - ionic 滚动有白色覆盖层滞后

javascript - 当 ui-sref 状态改变时 Controller 不会刷新

javascript - AngularJS - 当使用切片两次时数据不可用时,ng-repeat 显示空单元格

javascript - 仅将 Canvas 的一部分转移到新 Canvas

javascript - 单击单独的按钮时读取输入字段文件

javascript - 这个简单的指令没有显示

javascript - AngularJS "not well-formed",但仍显示在 Firefox 中

javascript - Angular 数据表 ng-repeat 不起作用

javascript - .each() 返回的问题(对象数 x 值)