Question

我有这样的多个div：

<div>{{form.name}}</div>

我可以手动将它们编辑为：

<div ng-hide="editorEnabled">
    {{form.name}}
    <button ng-click="editorEnabled=!editorEnabled">Edit</button>
</div>
<div ng-show="editorEnabled">
      <input ng-model="form.name">
      <button ng-click="editorEnabled=!editorEnabled">Done</button>
</div>

是否有可能以某种方式自动化，以便我不必复制/粘贴代码？我想过使用ng-repeat，但我的模型不仅仅是一个数组 - 它是一个json对象，并不是所有字段都应该应用它们。

Answer 1

是。您可以向整个表单添加一个类。当存在类“编辑模式”时，您可以使用文本隐藏div，并使用输入显示div。当它被删除时，你可以隐藏带有输入的div并显示带有文本的div。我认为这是最简单的。

HERE IS AN EXAMPLE如果您需要。

为需要应用此功能的位添加一个特殊类，然后使用CSS隐藏/显示其可编辑的内容。

Answer 2

这是自定义指令的主要候选者。我刚刚搜索了一些“点击编辑”指令的例子。你也可以自己编写经验（就像我一样）。

Answer 3

这非常适合创建指令。我创建了一个允许编辑的类似指令。见http://jsfiddle.net/cmyworld/6gMXL/

以下是相关代码

app.directive('editable', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            model: '=model',
            defaultValue: '@defaultval',
            removeFn: '=onDelete'
        },
        templateUrl:'editable-template',
        controller: function($scope) {},
        // The linking function will add behavior to the template
        link: function(scope, element, attrs) {
            scope.editorEnabled = false;

            scope.unEdit = function($event) {
                scope.model = angular.copy(scope.editModel);
                scope.editorEnabled = false;
                if ($event != null) $event.preventDefault();
            };

            scope.enableEditor = function() {
                scope.editModel = angular.copy(scope.model);
                scope.editorEnabled = true;
                // The element enable needs focus and we wait for milliseconds before allowing focus on it.
                timer = setTimeout(function() {
                    element.find('input').focus().select();
                }, 100);
            };
        }
    }
});

AngularJS：使多个<div>文本字段</div>可编辑

3 个答案: