Question

我对angularjs很新，我花了很多时间寻找解决方案却找不到任何东西。

基本上，我有一个表单来添加新字段，并且有一个列表显示使用ng-repeat在底部添加的所有新字段。当我点击列表项上的编辑按钮时，它会将所有值复制到顶层表单，然后您可以单击“更新”按钮将新值设置为下面的列表。

有没有更好的方法来实现这一目标？我无法让它发挥作用。

$scope.edit = function(item, index) {


        $scope.Title = item.title;
        $scope.Location = item.location;

        $scope.Editing = true;



        return false;

    };

    $scope.update = function(item, index) {

        item.title = $scope.Title;
        item.location = $scope.Location;

        $scope.stepEditing = false;

    }

感谢任何帮助。

Answer 1

根本不需要编辑功能。您还可以使用ng-click覆盖标题和位置的ngModel。请注意，为了更好的可读性，我更改了$scope.Title' to $ scope.myForm.title'和$scope.Location' to $ scope.myForm.location'。

JS将如下所示：

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

app.controller('ItemController', function($scope, $compile) {

    // adding new item
    var items = $scope.items = [];

    $scope.add = function() {

        var newItemObj = {

            title: $scope.myForm.title,
            location: $scope.myForm.location
        };

        items.push(newItemObj);

    };

    $scope.update = function(item, index){

        item.title      = $scope.myForm.title;
        item.location   = $scope.myForm.location;

        $scope.stepEditing = false;

    }

});

“编辑”的覆盖功能在HTML中如下所示：

<a ng-click="myForm.title = item.title; myForm.location = item.location" href="#">
Edit
</a>

我更新了jsfiddle以便您可以尝试： http://jsfiddle.net/c6m2S/4/

在评论后更新：

如果您只想要一个Update按钮，首先要将$ scope.items更改为数组。我们需要这样做，因为数组有一个索引，我们可以记住它并覆盖索引上的项目。您当前使用的JSON对象不使用索引。您仍然可以通过在JSON中使用id或index属性来标记JSON中的对象来强制执行此类行为。

无论如何，以下示例使用数组：

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

app.controller('ItemController', function ($scope, $compile) {

    // array for the itmes
    $scope.items = [];

    // the object for the form fields
    $scope.myForm = {};

    // label for the button
    $scope.myForm.buttonlabel = "Add";

    // this marks the currentItem, if the user clicks on edit
    $scope.myForm.currentItem = undefined;

    //use array here, so index can be used
    $scope.add = function () {
        if ($scope.myForm.currentItem !== undefined) {
            $scope.items[$scope.myForm.currentItem][0] = $scope.myForm.title;
            $scope.items[$scope.myForm.currentItem][1] = $scope.myForm.location;
            $scope.myForm.currentItem = undefined;
            $scope.myForm.buttonlabel = "Add";
        } else {
            $scope.items.push([$scope.myForm.title, $scope.myForm.location]);
        }
    };

});

变量$scope.myForm.currentItem' will remember the index of the current item, if the user clicks edit. The add（）'函数现在处理add' and更新'。当标记currentItem时，它将覆盖该项，否则，它将添加一个新项。按钮的标签保存到$scope.myForm.buttonlabel'. After editing an item, the button will change to更新'，如果没有，它将保持“添加”。

HTML需要根据数组而不是JSON的使用进行更改。此外，单击编辑按钮还可以保存当前的$index' to $ scope.myForm.currentItem'。

<div ng-app="myApp">

    <div class="container" id="new" ng-controller="ItemController">

        <div ng-class="{editing: Editing}" id="Form">
            <h2>new:</h2>

            <div class="inputfield">
                <i class="fa fa-user"></i>
                <input type="text" placeholder="Name" ng-required="true" ng-model="myForm.title"/>
            </div>

            <div class="inputfield">
                <i class="fa fa-location-arrow"></i>
                <input type="text" placeholder="Location" ng-required="true" ng-model="myForm.location"/>
            </div>


            <div class="inputfield">
                <a href="#" class="button addBtn" ng-click="add()">{{myForm.buttonlabel}}</a>
            </div>

            <ul>
                <li ng-repeat="item in items">

                    <div class="list">

                        <div class="view title">
                            <span>{{item[0]}}</span>
                        </div>
                        <div class="view">
                            <span>{{item[1]}}</span>
                        </div>

                    </div>


                    <a ng-click="myForm.title = item[0]; myForm.location = item[1]; myForm.currentItem = $index; myForm.buttonlabel = 'Update'" href="#">
                    Edit
                    </a>


                </li>
            </ul>
        </div>
    </div>
</div>

我更新了jsfiddle，因此您可以查看并测试它：http://jsfiddle.net/c6m2S/9/

如何将元素从ng重复范围复制到外部

1 个答案: