0

次のコード スニペットを使用すると、ページ上の要素を編集できますが、P タグをクリックすると、他のすべての要素もインライン エディター モードに変わります。クリックされた P タグのエディターのみを有効にするように、このスクリプトを修正するにはどうすればよいですか?

JS コード:

function Profile($scope) {
  $scope.person = {
    name : "Test Name",
    company : "Test",
    role : "Test Role"
  };

}

function Editor($scope) {
  $scope.editorEnabled = false;
  $scope.enableEditor = function() {
    $scope.editorEnabled = true;
    $scope.name = $scope.person.name;
    $scope.company = $scope.person.company;
    $scope.role = $scope.person.role;
  },

  $scope.disableEditor = function() {
    $scope.editorEnabled = false;
  },

  $scope.save = function() {
    $scope.person.name = $scope.name; //var = input.value
    $scope.person.company = $scope.company;
    $scope.person.role = $scope.role;
    $scope.disableEditor();
  }
}

HTML:

<div ng-controller="Profile">
    <div ng-controller="Editor">
        <h1 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.name}}</h1>
        <span ng:show="editorEnabled">
            <form class="form-inline">
                <input type="text" size="30" name="name" ng:required ng-model="name">
                <button class="btn btn-success"  ng:click="save()">Ok</button>
                <button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
            </form>
        </span>
        <h5 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.role}} @ {{person.company}}</h5>
        <span ng:show="editorEnabled">
            <form class="form-inline">
                <input type="text" size="30" name="role" ng:required ng-model="role"> @ <input type="text" size="30" name="company" ng:required ng-model="company">
                <button class="btn btn-success"  ng:click="save()">Ok</button>
                <button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
            </form>
        </span>
    </div>
</div>
4

1 に答える 1

1

私がアプローチする可能性が最も高い方法$scopeは、編集可能なフィールドを識別する新しいフィールドを導入することです。次に、ngShowディレクティブには次の行に沿った式が含まれます。

<span ng:show="editable == 'company'">

ディレクティブngClickは次のようになります。

<h1 ng:click="editor = 'company'">

キャンセル ボタンはこれを null に設定し、エディタの有効化/無効化機能はなくなります。これはすべて私の頭の上にあることを覚えておいてください。うまくいけば、正しい方向に向けることができます。機会があれば、この回答を改善します。

于 2013-05-07T18:18:28.123 に答える