角度可編輯更新本地模型問題

Question

我想創建一個窗體，其中一個文本字段值取決於另一個文本框。

參考angularjs，默認情況下xeditable更新局部模型點擊save.But後，我想立刻更新模型，並在另一個文本框

<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> 

我附上樣品的工作顯示更新的值代碼jsfiddle

Answer 1

其更新

檢查這個

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我認爲我找到了解決辦法。當用戶在鍵入輸入中選擇字典條目時，我遇到需要更新可編輯模式的情況。我一直在尋找解決方案，我發現下面的方法：

<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> 

而且方法，更新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 
     }); 

    }; 

我希望它能幫助。

UPDATE [的jsfiddle]

https://jsfiddle.net/fLc2sdd2/