AngularJS 中一个模型的多个视图

Question

我正在学习 AngularJS 框架，我的背景是 BackboneJS，我似乎无法理解 以常规方式做下一件事情：

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

在 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/

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