Question

（1）我正在尝试将新用户添加到项目列表（userList）。功能有效，但存在问题。我列出了可选择的列表＆＃39;又名..当用户点击列表中的项目时，我的html5代码中的文本框将填充列表中所选项目的值。这允许用户编辑项目中的各个属性。在文本框组的正下方是我的添加新用户＆＃39;按钮.....当应用程序第一次运行时，文本框为空，我用适当的文本填充它们，然后单击添加按钮，新用户将附加到列表中。然而问题是，当我已经选择了一个项目，编辑它...然后文本框仍然填充与项目值...现在如果我点击添加新用户...添加一个新用户...但现在我的列表中有重复的用户..这很好，因为我总是可以编辑其中一个......但是......看起来新用户和旧用户现在都以某种方式链接...如果我编辑其中一个，另一个的价值也发生变化......（我希望这是有道理的）。我觉得因为新用户是通过旧用户的选定记录创建的，不知何故他们的索引是相关的......似乎无法弄清楚如何在没有旧用户连接的情况下创建新用户

（2）删除用户工作正常，但除了删除的用户总是来自列表的底部。我希望能够选择列表中的任何项目并删除该特定项目。我尝试过使用类似的东西： -

$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

你有两个问题。在json/generate-string：

$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()删除 last 项并且不会实际上接受任何论点：

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; } }但测试返回值不等于-1，或indexOf()调用将从列表中删除最后一个元素。

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

1 个答案: