Question

我想要一个包含对象条目的列表。如果我点击该列表中的条目，我想要查看对象的详细信息和列表右侧区域的编辑按钮。如果我单击该按钮，则会显示详细信息，并且应显示用于编辑对象的表单。

HTML

<table class="table table-striped">
    <tr 
        ng-repeat="object in objects" 
        ng-click="select(object.id)"
    >
        <td>{{object.name}}</td>
    </tr>
</table>

<button ng-click="edit(selectedObject.id)">Edit</button>

<div class="view">
    Name: {{selectedObject.name}}
</div>

<form>
    <label>Name</label>
    <input ng-model="object.name">
</form>

controller.js

myModule.controller('MyController', function($scope, MyService) {
    $scope.objects = MyService.getObjects();

    $scope.select = function(id) {
        $scope.selectedObject = angular.copy(MyService.getObject(id));  
    };

    $scope.edit = function(id) {
        ...
    };
});

在编辑功能中，我可以使用selectedObject，但也许将来我也想直接编辑对象而不选择它。所以首先我可以像在select函数中那样做，但之后我会调用服务两次以接收相同的对象......

此外，我还不知道如何处理view-和editmode之间的切换。

提前致谢！

Answer 1

你应该给他们自己的控制器提供详细视图和编辑表单，这样他们就可以分开了。

强烈建议使用https://github.com/angular-ui/ui-router嵌套视图和多个/命名视图来管理控制器。

然后，您可以将列表视图设为父级，并使用自己的网址/item/:id/view和/item/:id/edit将其他2作为子视图添加，请参阅$stateParams以获取网址中的值

Answer 2

我对你的问题不是100％肯定，但你可以显示/隐藏输入

$scope.edit = function () {
        $scope.editmode = true
};

和

<div class="view" ng-show="!editMode">    
    Name: {{selectedObject.name}}
</div>

与

ng-show="editmode"

输入

或者您可以使用

输入上的

ng-readonly="!editmode"（然后您不需要另一个div来显示名称）

如果您计划显示obejcts有一个表，请考虑允许在网格内部进行编辑的ngGrid

Angularjs - 查看和编辑对象

2 个答案: