1

我正在学习 AngularJS 框架，我的背景是 BackboneJS，似乎我无法弄清楚接下来要做的事情的常规方法：

我有一个只读元素列表，每个元素都有“编辑”按钮，可将此特定元素切换到编辑模式。在编辑模式下，我需要渲染输入元素而不是 span、p 等。

在 Backbone.js 中执行此操作的方法是简单地创建 EditView 并将模型传递给它，但我不知道这在 Angular 中是如何工作的。我将数据传递给范围并呈现只读列表，当用户单击元素中的“编辑”按钮时，我应该如何更改元素的视图？

谢谢！

4

1 回答 1

0

Angular 通过使用模型进行编辑，使此任务比 Backbone 更简单，然后您更新原始列表并清除编辑模型。

风景：

<div ng-app='App'>
<div ng-controller='mainCtrl'>
    <div ng-controller='childCtrl'>
        <strong>Controller</strong>
        <ul>
            <li ng-repeat='item in list'>{{item.name}} <button ng-click='edit($index)'>+</button></li>
        </ul>
        <div ng-show='editModel.name'>
            Name: <input type="text" ng-model='editModel.name'/> <button ng-click='save()'>Save</button><button ng-click='cancelEdit()'>Cancel</button>
        </div>
    </div>
</div>

角度应用程序：

angular.module('App', [])
.controller('mainCtrl', ['$scope', function($scope){
    $scope.list = [ {name:'item 1'}, {name:'item 2'}, {name:'item 3'} ];
}])
.controller('childCtrl', ['$scope', function($scope){
    $scope.editModel = {};
    $scope.edit = function(index){
        $scope.editModel.index = index;
        $scope.editModel.name = $scope.list[index].name;
    };

    $scope.cancelEdit = function(){
        $scope.editModel = {};
    };

    $scope.save = function(){
        if($scope.editModel.hasOwnProperty('index')){
            $scope.list[$scope.editModel.index] = $scope.editModel;
        }
        else if($scope.editModel.name && $scope.editModel.name.length){
            $scope.list.push($scope.editModel);
        }
        $scope.cancelEdit();
    };
}]);

JsFiddle：http: //jsfiddle.net/guilhermenagatomo/Bp6bY/

我正在使用控制器嵌套，因此该列表可以被您在应用程序中拥有的其他控制器使用，或者您可以创建一个控制器来处理编辑。

于 2013-05-13T00:43:40.623 回答