AngularJs - ngRepeat 删除视图中的特定行

AngularJs - ngRepeat Delete a particular line in View

本文关键字：视图 ngRepeat 删除 AngularJs      更新时间：2023-09-26

>我有 3 个项目的简单渲染，它们的特定 ID 粘有那里的名称字段。每当我仅使用要跟随的按钮删除该行时，我都想显示一条特定消息。当我这样做时，我在传递仅用于该特定行的删除 id 时遇到问题，并且所有 n 行（此处为 3）都被删除。

.HTML： 

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
<div>
    <p ng-repeat="x in List" ng-show="!deleted">{{x.name}}<button ng-click="del(x.id)">Delete</button></p>
    <p ng-show="deleted">This line has been deleted.</p>
</div>
<script>
//module declaration
var app = angular.module('myApp',[]);
//Controller declaration
app.controller('myCtrl',function($scope){
    $scope.deleted = false;
    $scope.List = [{"name":"Peter Martin","id":"1"},{"name":"Lita Schedan","id":"2"},{"name":"Jenni Markints","id":"3"}];
    $scope.del = function(id){
        //for this id -> only 
        $scope.deleted = true;
    }
});
</script>
</body>
</html>

这意味着，如果我放置第 2 行的删除按钮。第一行和第二行必须带有删除按钮，但在中间行必须显示消息"此行已被删除"。

基本上应该使用角度过滤器显示已删除flag false 的行。为此，您需要确保列表对象显示具有deleted在初始加载时false的道具。然后单击将整行对象传递给del方法。为了显示错误消息，您可以使用$timeout显示半秒钟的消息

标记 

<div>
    <p ng-repeat="x in List | filter : {deleted: false}">
       {{x.name}}
       <button ng-click="del(x)">Delete</button>
    </p>
    <p ng-show="deleted">Line with id {{deletedId}} has been deleted.</p>
</div>

并在单击元素时使删除标志true

控制器

//Controller declaration
app.controller('myCtrl',function($scope, $timeout){
    $scope.deleted = false;
    $scope.List = [{"name":"Peter Martin","id":"1"},{"name":"Lita Schedan","id":"2"},{"name":"Jenni Markints","id":"3"}];
    angular.forEach($scope.List, function(ele){
       ele.deleted = false;
    })
    $scope.del = function(x){ //passed object
        x.deleted = true;
        //for showing message
        $scope.deleted = true;
        $scope.deletedId = x.id;
        $timeout(function(){
           $scope.deleted = false;
           $scope.deletedId = undefined;
        }, 500)
    }
});

如果你真的想从数组中删除元素，你可以通过$index传递给它来使用.slice()方法

相关文章：