Model view controller AngularJS中一个模型的多个视图

我正在学习AngularJS框架，我的背景是BackboneJS，似乎我无法理解 下一步要做的事情是：

我有一个只读的元素列表，每个元素都有一个“编辑”按钮，用于切换此选项 将特定元素添加到编辑模式。在编辑模式下，我需要渲染输入元素 跨度、p’s等的

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

---

谢谢

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

观点：

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

JsFiddle：

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

您可以查看以下内容：

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();
    };
}]);