Problema nell'aggiornamento del modello locale in xularizable angolare

Question

Sto tentando di creare un modulo, in cui un valore del campo di testo dipende da un'altra casella di testo.

Con riferimento alla angularjs, per impostazione predefinita modello locale di aggiornamento xeditable dopo aver fatto clic save.But vorrei aggiornare il modello immediatamente e mostrare il valore aggiornato in un'altra casella di testo

<span editable-text="user.name" e-ng-model="user.name" e-name="name"></span> 
<span editable-text="user.username" e-ng-model="user.username" e-name="username"></span> 

Ho incluso il lavoro del campione codice jsfiddle

Answer 1

suo aggiornamento

controllo questo

Working Demo

html

<h4>Angular-xeditable Editable form (Bootstrap 3)</h4> 
<div ng-app="app" ng-controller="Ctrl"> 
<form editable-form name="editableForm" onaftersave="saveUser()"> 
    <div> 
     <!-- editable username (text with validation) --> 
     <span class="title">Name: </span> 
     <span editable-text="user.name" e-ng-model="user.name" e-name="name" e-required>{{ user.name || 'empty' }}</span> 
    </div> 

    <div> 
     <!-- editable username (text with validation) --> 
     <span class="title">User name: </span> 
     <span editable-text="user.username" e-ng-model="user.username" e-name="username" e-required>{{ user.username || 'empty' }}</span> 
    </div> 
    <div> 

     <!-- button to show form --> 
     <button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible"> 
     Edit 
     </button> 


     <!-- buttons to submit/cancel form --> 
     <span ng-show="editableForm.$visible"> 
     <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting"> 
      Save 
     </button> 
     <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()"> 
      Cancel 
     </button> 
     </span> 
       <br> {{user}} 
    </div> 
    </form> 
</div> 

Answer 2

@Pravin penso che ho trovato una soluzione. Ho avuto la situazione in cui ho bisogno di aggiornare il modello xeditable quando l'utente seleziona la voce del dizionario su input typeahead. Stavo cercando la soluzione e ho trovato il modo seguente:

<span editable-text="p.name" e-name="name" e-form="productForm" e-required 
    e-typeahead="product as product.name for product in getProducts($viewValue) | filter:$viewValue | limitTo: 8" 
    e-typeahead-editable="true" e-ng-maxlength="256" e-typeahead-focus-first="false" 
    e-typeahead-on-select='onSelectProductFromDictionary($item, $model, productForm)'> 
    {{ p.name }} 
</span> 

E il metodo che aggiornano i dati xeditable:

$scope.onSelectProductFromDictionary = function ($item, $model, form) { 

     angular.forEach(form.$editables, function(editable) { 
      if (editable.name === 'name') { 
       return; 
      } 
      editable.scope.$data = $model.something; // this is a dictionary model 
      editable.save(); // move the value from edit input to view xeditable value 
      editable.hide(); // hide the specific xeditable input if you needs 
     }); 

    }; 

spero che aiuta.

UPDATE [JSFIDDLE]

https://jsfiddle.net/fLc2sdd2/