Edit items by clicking a button. Angular.js

Question

I currently have a directive to dynamically edit a field. I have in the header of the accordion a field to edit and another field in the content of the accordion. If I click the edit button, the fields in the respective row can be edited, and this works fine. My problem is when I save or when I cancel it (when I click on the save or cancel button) immediately disappears the text field of both the header and the contents of the header. I need the text field ONLY disappear for the item in which I am going to save or cancel. When you click on the edit button, the 2 text fields should appear in both the header and the content (this works). And when clicking save or cancel, the text field in the selected element should disappear / appear.

  <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

Hi there! can't you just toggle the "faq.open" on the current ($index) element when save/cancel ? — Julo0sS
– Julo0sS, Commented Jun 2, 2017 at 5:16

aseferov · Accepted Answer · 2017-06-02 05:27:41Z

1

use one-way (one-directional) binding for editState

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

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

answered Jun 2, 2017 at 5:27

aseferov

6,4233 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yavg Over a year ago

great! I'll give you the points. But I forgot to say something. How do I do that clicking on the header of the accordion also appears the text field to edit in the content, but if I click on the save / cancel button, it only affects the item that I am selecting, the title or the content Of the accordion.

ScottFoster1000 · Accepted Answer · 2017-06-02 05:26:03Z

I believe you'll need to manage two separate booleans at the controller level so one directive doesn't overwrite the status of the other and then you have to set both booleans with your open button. I kept the master state so your glyph button will open or close both and the save/cancel should operate independently of each other.

$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

You could also communicate the master status with the directives if you wanted their input fields to open and close both.

Collectives™ on Stack Overflow

Edit items by clicking a button. Angular.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related