Modify a text field dynamically. Angular.js

Question

I have a directive, in which I click on a field and then I can edit it. To this directive I can add a property called "typeinput". If typeinput = "textarea" then I would like the dynamic field to be a textarea and not an input text. I'm doing this validation with the help of an ng-if.

But if I do this this stops working, and the new dynamic field value is not saved. How can i fix it?

<div ng-repeat="faq in faqs">
      <a  href='' click-to-edit  ng-model='faq.pregunta'   typeinput='textarea' >{{faq.pregunta}}</a>
</div>

    .directive('clickToEdit', function($timeout,$compile) {

      return {
          require: 'ngModel',
          scope: {
              model: '=ngModel'
          },
          replace: true,
          transclude: false,
          // includes our template
          template:
              '<div class="templateRoot">'+
                  '<div class="hover-edit-trigger" title="click to edit">'+
                      '<div class="hover-text-field" ng-show="!editState" ng-click="toggle()">{{model}}</div>'+
                      //'<span ng-if="type==true">'+
                      '<input class="inputText" type="text" ng-model="localModel" ng-enter="save()" ng-show="editState" />' +
                      //'</span>'+
                      //'<span ng-if="type==false">'+
                      //'<textarea class="inputText"  ng-model="localModel" ng-enter="save()" ng-show="editState" />' +
                      //'</span>'+
                      '<div class="edit-button-group pull-right" ng-show="editState">'+
                          '<div class="glyphicon glyphicon-ok"  ng-click="save()"></div>'+
                          '<div class="glyphicon glyphicon-remove" ng-click="cancel()"></div>'+
                      '</div>'+
                  '</div>'+
              '</div>',

https://jsfiddle.net/ybmrzo5w/

Your plunker link is broken

JeanJacques
– JeanJacques

2017-05-30 14:54:10 +00:00
Commented May 30, 2017 at 14:54 — JeanJacques
– JeanJacques, Commented May 30, 2017 at 14:54
plunker is not responding...wait me update the link..

yavg
– yavg

2017-05-30 14:58:20 +00:00
Commented May 30, 2017 at 14:58 — yavg
– yavg, Commented May 30, 2017 at 14:58
@JeanJacques jsfiddle.net/ybmrzo5w

yavg
– yavg

2017-05-30 15:01:01 +00:00
Commented May 30, 2017 at 15:01 — yavg
– yavg, Commented May 30, 2017 at 15:01

Stanislav Kvitash · Accepted Answer · 2017-05-30 15:10:59Z

2

The issue here is that ng-if directive, like other directives creates a child scope.

You can use an object property in ng-model - then, even if ng-if creates the new child scope, the parent scope will have the changes: localModel.value should work in your case.

See the working jsfiddle.

answered May 30, 2017 at 15:10

Stanislav Kvitash

4,63220 silver badges29 bronze badges

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

Comments

JeanJacques · Accepted Answer · 2017-06-13 14:59:25Z

0

When you use an ngIf it creates a child scope so in the ngModel of your textarea and your input you need to reference to the parent scope like this :

ng-model="$parent.localModel"

edited Jun 13, 2017 at 14:59

answered May 30, 2017 at 15:12

JeanJacques

1,7501 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

Modify a text field dynamically. Angular.js

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related