Question

我已经在AngularJS中创建了一个带有编辑，保存和取消选项的应用程序，应用程序工作正常，此时我正在为所有三个字段编辑选项，但是如何让我有一个编辑选项来制作所有字段可编辑，同样保存和取消

任何人都可以告诉我一些解决方案吗

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 demo 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;
});

所有字段编辑的单一编辑超链接选项

1 个答案: