javascript - 在 Angular 可编辑中更新本地模型的问题

Question

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

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

Answer 1

@Pravin 我认为我找到了解决方案。当用户在输入前选择字典条目时，我遇到了需要更新 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/