Question

我正在学习AngularJS框架，我的背景是BackboneJS，似乎我无法想象用传统方式做下一件事：

我有一个只读列表的元素，每个元素都有“编辑”按钮切换它编辑模式的特定元素。在编辑模式下，我需要渲染输入元素跨度，等等。

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

谢谢！

Answer 1

通过使用模型进行编辑，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/

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

AngularJS中一个模型的多个视图

1 个答案: