删除动态添加的值到 ng-repeat(angularjs)

Posted 2023-05-09

【中文标题】删除动态添加的值到 ng-repeat(angularjs)

【英文标题】：delete dynamically added values to the ng-repeat(angularjs)

【发布时间】：2016-02-28 17:22:18

【问题描述】：

首先祝大家感恩节快乐！！

我有这个 plunker-> http://plnkr.co/edit/N2bs5xqmtsj3MmZKEI25?p=info 用户选择所有三个值，然后才启用“添加”按钮进行添加。

单击后，使用 ng-repeat 将显示以下所选条目。我还在每一行添加了一个删除按钮按钮。在这种情况下，我如何确保删除功能有效。 ?即，如果我单击删除，则只会删除该特定行。

其次，如果您在第一次添加时注意到了，则在第一行上方会显示一个删除按钮。我怎样才能删除它？

我还想将选定的文件保存在控制器中，以便将这些数据提供给后端。我如何知道用户选择了哪些选项。

这是 plunker 代码- html

<div ng-controller="Controller">
<form name="form" novalidate>
     <input type='file' onchange="angular.element(this).scope().fileNameChanged(this)" ng-model="document" valid-file required>
               <select name="singleSelect" ng-model="activeItem.content" ng-options="foo as foo for foo in contentarray" required>
                   <option ng-if="contentarray.length > 1" value="" selected>Choose</option>
               </select>

               <select name="singleSelect1" ng-model="activeItem.content1" ng-options="foo as foo for foo in content1array" required>
                   <option ng-if="content1array.length > 1" value="" selected>Choose</option>
               </select>
               <button ng-click="addItem()" ng-disabled="disableAdd || (form.$invalid && (!form.$valid && 'invalid' || 'valid'))">Add</button>
</form>

<div ng-repeat="item in items" ng-show="isvisible">
      <a>item.name</a>
      <a>item.content</a>
      <a>item.content1</a>
      <button ng-click="deleteItem()">Delete</button>
</div>
</div>

JS代码

var app = angular.module('Select', []);

app.controller('Controller', function($scope, $timeout) 
/* for adding optional file based selection values selected by the user*/
$scope.isvisible = false;  /* display 1st line  when user clicks on add button*/
$scope.items = [
];

$scope.activeItem = 
    name: '',
    content: '',
    content1: ''

$scope.fileNameChanged = function (el) 
    $scope.activeItem.name = el.files[0].name



$scope.addItem = function () 
    $scope.isvisible = true;
    $scope.items.push($scope.activeItem);
    if ($scope.items.length > 6) 
        $scope.disableAdd = true
    
    $scope.activeItem =  /* reset active item*/
    angular.element("input[type='file']").val(null); /* To clear the input type file selected for next selection*/





/* for showing select options and enabling add button only when both the options are selected*/
$scope.content = ;
$scope.content1 = ;

$scope.contentarray = ['2', '3'];
$scope.content1array = ['12', '121', '1233', '1211'];

$scope.trigger = function () 
    $timeout(function () 
        $('form.bad select').trigger('change');
    )


);

【参考方案1】：

我指的是你的deleteItem()和delete-button-问题：

您必须在控制器中实现 deleteItem() 方法。 ng-repeat 将自动更新您的列表，当您从模型ìtems 中删除项目时，不需要angular.element。这是可行的，因为 Angular 中的双向数据绑定。

为您的 ìtems 添加一个 id 并使用它从模型中删除该项目，例如：

$scope.addItem = function() 
    //...
    $scope.activeItem.id = $scope.items.length;
    $scope.items.push($scope.activeItem);
    //...


$scope.deleteItem = function(item) 
    $scope.items.splice(item.id, 1);

在您的ng-repeat 中，您需要像这样定义您的按钮：

<button ng-click="deleteItem(item)">Delete</button>

您的另一个问题是额外的delete-按钮：显示，因为您使用空元素初始化模型ìtems。改为这样初始化，按钮将不会显示：

$scope.items = [];

希望有帮助

【讨论】：

这对我来说非常有效。也谢谢你的解释。

我可以在控制器端保存所有这些值吗？即我想知道用户选择了什么。我怎样才能得到这些？

您可以根据需要在控制器中保存尽可能多的数据。如果您想从<ng-repeat>-section 中选择一个项目，那么您只需要添加一个单选按钮或复选框，无论您喜欢什么，并将该元素绑定到控制器中的模型。尝试这样的事情，例如：<input type="checkbox" ng-model="items[item.id].checked">

我不确定，如果我理解这个问题。所有选定的数据都已存储在您的控制器中。它已添加到您的模型$scope.ìtems。每次添加一行时，该数据也会存储在您的控制器中。如果您删除$scope.items中的数据，它将自动删除相应的行。基本上ng-repeat 监视$scope.items 并且每次更改时，ng-repeat 将再次运行并更新您的列表。

是的。现在我知道了。我想知道删除的行是否得到更新。它确实是因为数据绑定。谢谢吉多..