ボタンをクリックして項目を編集します。 Angular.js

Question

私は現在、フィールドを動的に編集する命令を持っています。私はアコーデオンのヘッダーにアコーディオンの内容の編集と別のフィールドを持っています。編集ボタンをクリックすると、それぞれの行のフィールドを編集することができ、うまくいきます。私の問題は、保存時またはキャンセル時（保存またはキャンセルボタンをクリックしたとき）に、ヘッダーとヘッダーの内容の両方のテキストフィールドがすぐに消えてしまうことです。テキストフィールドは、保存またはキャンセルするアイテムに対してのみ消える必要があります。編集ボタンをクリックすると、ヘッダーとコンテンツの両方に2つのテキストフィールドが表示されます（これは機能します）。保存またはキャンセルをクリックすると、選択した要素のテキストフィールドが消えたり表示されたりするはずです。私は1つのディレクティブは、他のステータスを上書きしないと、あなたはあなたの開いたとの両方ブール値を設定する必要がありますので、あなたがコントローラレベルで二つの別々のブール値を管理する必要があります信じて

<div ng-controller="AccordionDemoCtrl"> 

    <uib-accordion close-others="true"> 
    <div ng-repeat="faq in faqs"> 
     <div class="col-sm-11" > 
      <div uib-accordion-group class="panel-default" is-open="faq.open"> 
       <uib-accordion-heading > 
        <span ng-click="ignoreClick($event);" ><a href='' click-to-edit edit-state='faq.editState' ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i> 
       </uib-accordion-heading> 
       <span click-to-edit edit-state='faq.editState' ng-model="faq.respuesta" >{{faq.respuesta}}</span> 

      </div> 
     </div> 
     <div class="col-sm-1" > 
      <button type="button" ng-click="toggleEditState($index)" class="btn btn-default"> 
      <span class="glyphicon glyphicon glyphicon-edit"></span> 
      </button> 
     </div> 
     </div> 
    </uib-accordion> 
    </div> 

https://plnkr.co/edit/S4OllJV64EYFNo6WIjVH?p=preview

Answer 1

ボタン。グリフボタンが開いたり閉じたりするようにマスター状態を保ちました。保存/キャンセルは互いに独立して動作するはずです。

$scope.editState = false; 
$scope.editHeader = false; 
$scope.editBody = false; 

$scope.toggleEditState = function(index, val) { 
    debugger; 
    $scope.editState = !$scope.editState; 
    $scope.faqs[index].editHeader = $scope.editState; 
    $scope.faqs[index].editBody = $scope.editState; 
} 


    <div ng-repeat="faq in faqs"> 
     <div class="col-sm-11" > 
      <div uib-accordion-group class="panel-default" is-open="faq.open"> 
       <uib-accordion-heading > 
        <span ng-click="ignoreClick($event);" ><a href='' click-to-edit edit-state='faq.editHeader' ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i> 
       </uib-accordion-heading> 
       <span click-to-edit edit-state='faq.editBody' ng-model="faq.respuesta" >{{faq.respuesta}}</span> 

      </div> 
     </div> 
     <div class="col-sm-1" > 
      <button type="button" ng-click="toggleEditState($index)" class="btn btn-default"> 
      <span class="glyphicon glyphicon glyphicon-edit"></span> 
      </button> 
     </div> 

https://plnkr.co/edit/91cGWoTKyJsZQKxYapiT?p=preview

あなたはそれらの入力フィールドの両方を開閉したい場合にも、ディレクティブでマスターステータスを通信することができます。

Answer 2

使用片方向（一方向）がeditState

scope: { 
     model: '=ngModel', 
     editState: '<' 
    }, 

https://plnkr.co/edit/dNehOxAIRHsRqgK9wXJx?p=preview