javascript - AngularJS 添加新项目并从列表中删除现有项目

Question

(1) 我正在尝试将新用户添加到项目列表 (userList)。该功能有效，但有一个问题。我将列表设置为“可选择”。当用户单击列表中的某个项目时，我的 html5 代码中的文本框将填充列表中所选项目的值。这允许用户编辑项目的各个属性。在文本框组的正下方是我的“添加新用户”按钮......当应用程序首次运行时，文本框是空的，我用适当的文本填充它们，然后单击添加按钮，新用户将被附加到列表。然而问题是，当我已经选择一个项目并对其进行编辑时...然后文本框仍然填充项目值...现在如果我单击添加新用户...将添加一个新用户...但现在我的列表中有重复的用户...这很好，因为我总是可以编辑其中一个...但是...看起来新用户和旧用户现在都以某种方式链接...如果我编辑其中一个的值，另一个的值也会改变......(我希望这是有道理的)。我觉得因为新用户是通过旧用户的选定记录创建的，所以它们的索引在某种程度上是相关的......似乎无法弄清楚如何在没有旧用户连接到它的情况下创建新用户。

(2) 删除用户工作正常，但异常(exception)的是，删除的用户始终位于列表的底部。我希望能够选择列表中的任何项目并删除该特定项目。我尝试使用类似的东西:-

$scope.userList.splice($scope.userList.indexOf(currentUser), 1);

但没有效果。

我的 JavaScript:-

<script type="text/javascript">
    function UserController($scope) {
        $scope.userList = [
           { Name: "John Doe1", Title: "xxxx", Company: "yyyy", Place: "zzzz" },
           { Name: "John Doe2", Title: "xxxx", Company: "yyyy", Place: "zzzz" },
           { Name: "John Doe3", Title: "xxxx", Company: "yyyy", Place: "zzzz" },
           { Name: "John Doe4", Title: "xxxx", Company: "yyyy", Place: "zzzz" }
        ];


        $scope.selectUser = function (user) {
            $scope.currentUser = user;
        }

        $scope.addNew = function (currentUser) {
            $scope.userList.push(currentUser);
            $scope.currentUser = {}; //clear out Employee object
        }

        $scope.removeItem = function (currentUser) {
           // $scope.userList.pop(currentUser);
            $scope.userList.splice($scope.userList.indexOf(currentUser), 1);
            $scope.currentUser = {}; //clear out Employee object
        }
    }
</script>

我的 HTML:-

<div class="row">
        <div style="margin-top: 40px"></div>
        <div data-ng-app="" data-ng-controller="UserController">
            <b>Employee List</b><br />
            <br />
            <ul>
                <li data-ng-repeat="user in userList">

                    <a data-ng-click="selectUser(user)">{{user.Name}} | {{user.Title}} | {{user.Company}} | {{user.Place}}. </a>

                </li>
            </ul>
            <hr>
            <div style="margin-top: 40px"></div>
            <b>Selected Employee</b><br />
            <br />
            <div style="border:dotted 1px grey; padding:20px 0 20px 0; width:40%;">
            <div class="row" style="margin-left: 30px">
                <div style="display: inline-block;">
                    Name: 
                </div>
                <div style="display: inline-block; margin-left: 35px;">
                    <input type="text" data-ng-model="currentUser.Name">
                </div>
            </div>
            <div style="margin-top: 20px"></div>
            <div class="row" style="margin-left: 30px">
                <div style="display: inline-block;">
                    Title: 
                </div>
                <div style="display: inline-block; margin-left: 45px;">
                    <input type="text" data-ng-model="currentUser.Title">
                </div>
            </div>
            <div style="margin-top: 20px"></div>
            <div class="row" style="margin-left: 30px">
                <div style="display: inline-block;">
                    Company: 
                </div>
                <div style="display: inline-block; margin-left: 10px;">
                    <input type="text" data-ng-model="currentUser.Company">
                </div>
            </div>
            <div style="margin-top: 20px"></div>
            <div class="row" style="margin-left: 30px">
                <div style="display: inline-block;">
                    Place:
                </div>
                <div style="display: inline-block; margin-left: 35px;">
                    <input type="text" data-ng-model="currentUser.Place">
                </div>
            </div>
            </div>
            <div>
                <div style="margin: 2% 0 0 8%; display:inline-block">
                    <button data-ng-click="addNew(currentUser)" class="btn btn-primary" type="button">Add New Employee</button>
                </div>
                <div style="margin: 2% 0 0 1%; display:inline-block">
                    <button data-ng-click="removeItem(currentUser)" class="btn btn-primary" type="button">Delete Employee</button>
                </div>
            </div>
            <hr>
            <div style="margin-top: 40px"></div>
            <b>Employee Details:</b><br />
            <br />
            {{currentUser.Name}} is a {{currentUser.Title}} at {{currentUser.Company}}. He currently lives in {{currentUser.Place}}. 
        </div>
    </div>

* 编辑* 我解决了删除用户问题:-

 $scope.removeItem = function (currentUser) {
                if ($scope.userList.indexOf(currentUser) >= 0) {
                    $scope.userList.splice($scope.userList.indexOf(currentUser), 1);
                    $scope.currentUser = {}; //clear out Employee object
                }
            }

感谢您的建议，添加新用户的问题也得到了解决。

Answer 1

您有两个问题。在$scope.addNew()中:

$scope.userList.push(currentUser);

此行推送对您当前正在编辑的同一对象的引用。这就是用户显示为链接的原因，因为相同的对象在列表中出现了两次。相反，您需要将对象的属性复制到新对象上，在本例中可以使用 angular.extend() 来完成此操作:

$scope.userList.push(angular.extend({}, currentUser));

您可能会考虑使用“添加新”按钮，将一个空白用户添加到列表中并选择它进行编辑:

$scope.addNew = function () {
    $scope.userList.push($scope.currentUser = {});
};

在 $scope.removeItem() 中，您使用数组的 pop() 方法尝试删除特定项目，但 pop() 删除最后项并且实际上不接受任何参数:

$scope.userList.pop(currentUser);

您可以迭代列表以删除特定对象:

var i;
for (i = 0; i < $scope.userList.length; ++i) {
    if ($scope.userList[i] === currentUser) {
        $scope.userList.splice(i, 1);
        break;
    }
}

或者您可以使用 indexOf() 但测试返回值是否不等于 -1，或者 splice() 调用将从中删除最后一个元素列表。