在 angular xeditable 中更新本地模型的问题

Posted 2023-05-08

【中文标题】在 angular xeditable 中更新本地模型的问题

【英文标题】：Issue in updating local model in angular xeditable

【发布时间】：2014-07-26 02:07:30

【问题描述】：

我正在尝试创建一个表单，其中一个文本字段值取决于另一个文本框。

参考angularjs，默认xeditable在点击保存后更新本地模型。但我想立即更新模型并在另一个文本框中显示更新的值

<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中附上了示例工作代码

【问题讨论】：

ng-model 点击保存按钮后的值正在更新

【参考方案1】：

@Pravin 我认为我找到了解决方案。当用户在 typeahead 输入中选择字典条目时，我需要更新 xeditable 模型。我正在寻找解决方案，我找到了以下方法：

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

以及更新可编辑数据的方法：

    $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
        );

    ;

希望对你有帮助。

更新 [JSFIDDLE]

https://jsfiddle.net/fLc2sdd2/

【讨论】：

您能否在小提琴中包含您的解决方案？ @przemek

我添加了示例小提琴。您可以尝试选择状态，然后用户名应该更改。您可以尝试更多...

【参考方案2】：

更新中

检查一下

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>

【讨论】：

感谢您的回复。但我正在尝试的是，当我在文本框 1 中键入值时，它应该更新文本框 2，其中包含值取决于模型 1 的模型。

这意味着在键入时您希望在文本框中更改数据值2

我的最终目标是三步。 1.在文本框中输入一些东西1。 2.基于 textbox1 中的文本，应该执行一些功能。 3.基于它在文本框2中返回一些值。注意：应该在点击保存按钮之前完成。

@Pravin 你找到解决方案了吗？