javascript - 所有字段编辑的单个编辑超链接选项

Question

我已经在 AngularJS 中创建了一个带有编辑、保存和取消选项的应用程序，该应用程序工作正常，现在我对所有三个字段都有编辑选项，但是我如何才能有一个编辑选项来制作所有的字段可编辑和保存和取消类似

谁能告诉我一些解决办法

DEMO

HTML

<div ng-controller="LocationFormCtrl">
    <h2>Editors</h2>
    <span ng-repeat="location in locations">


    <div class="field">
        <strong>State:</strong>
        <div click-to-edit="location.state"><input ng-model="location.state"/></div>
    </div>


    <div class="field">
        <strong>City:</strong>
        <div click-to-edit="location.city">
            <select ng-model="location.city" ng-options="loc.city as loc.city for loc in selectableCities"></select>
        </div>
    </div>

    <div class="field">
        <strong>Neighbourhood:</strong>
        <div click-to-edit="location.neighbourhood"><input ng-model="location.neighbourhood"/></div>
    </div>
    <hr></hr>


    </span>
</div>

Answer 1

我创建了一个使用你指令的新指令。我也稍微更新了你的指令。 不确定你是否想要这个。

您可以找到 jsFiddle 演示 here .

更新了您的指令，使其在编辑所有模式时不显示单独的保存和取消。

您可以找到更新的 jsFiddle 演示 here .

    app.directive("clickToEditAll",function(){
    var partial = '<div><div class="field">' +
        '<strong>State:</strong>' +
        '<div click-to-edit="myData.state" external-controle="externalControle"><input ng-model="myData.state"/></div>' +
   ' </div>' +


    '<div class="field">' +
        '<strong>City:</strong>' +
        '<div click-to-edit="myData.city" external-controle="externalControle">' +
            '<select ng-model="myData.city" ng-options="loc.city as loc.city for loc in selectableCities"></select>' +
        '</div>' +
    '</div>' +

    '<div class="field">' +
        '<strong>Neighbourhood:</strong>' +
        '<div click-to-edit="myData.neighbourhood" external-controle="externalControle"><input ng-model="myData.neighbourhood"/></div>' +
    '</div>' +
    '<button ng-show="externalControle.editAll !== true" ng-click="editAllClicked()">Edit All</button><button ng-show="externalControle.editAll === true" ng-click="saveAllClicked()">Save</button><button ng-show="externalControle.editAll === true" ng-click="cancelAllClicked()">Cancel</button><hr/></div>'
    var retValue = {
        restrict: "A",
        template:partial,
        scope:{
            myData:"=",
            selectableCities:"=",
            externalControle: "="
        },
        link:function(scope, elements, attributes){
            scope.editAllClicked = function(){
                scope.externalControle.editAll = true;
            }

            scope.saveAllClicked = function(){
                scope.externalControle.saveAll = true;
            }

            scope.cancelAllClicked = function(){
                scope.externalControle.cancelAll = true;
            }
        }
    }
    return retValue;
});