Javascript 在angular xeditable中更新局部模型时出现的问题
我试图创建一个表单,其中一个文本字段值依赖于另一个文本框 关于,默认情况下,单击“保存”后可编辑更新本地模型。但我希望立即更新模型,并在另一个文本框中显示更新后的值Javascript 在angular xeditable中更新局部模型时出现的问题,javascript,jquery,angularjs,x-editable,Javascript,Jquery,Angularjs,X Editable,我试图创建一个表单,其中一个文本字段值依赖于另一个文本框 关于,默认情况下,单击“保存”后可编辑更新本地模型。但我希望立即更新模型,并在另一个文本框中显示更新后的值 <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="user
<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>
我已将示例工作代码附在其更新中
检查这个
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>
角度可编辑表单(引导3)
姓名:
{{user.name | |'empty'}
用户名:
{{user.username | |'empty'}
编辑
拯救
取消
{{user}}
@Pravin我想我找到了一个解决办法。当用户在typeahead输入中选择字典条目时,我需要更新可编辑模型。我正在寻找解决方案,我发现了以下方法:
<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>
我希望有帮助
更新[JSFIDDLE]
ng单击“保存”按钮后的型号值更新感谢您的回复。但我尝试的是,当我在文本框1中键入值时,它应该更新文本框2,其中包含的模型的值取决于模型1。这意味着,在键入自身时,您希望在文本框2中更改数据值。我的最终目标是3步。1.在文本框1中键入一些内容。2.根据文本框1中的文本,应执行某些功能。3.基于此,它在文本框2中返回一些值。注意:应该在单击“保存”按钮之前完成。@Pravin您找到解决方案了吗?请将您的解决方案包括在FIDLE中好吗@przemekI添加了示例小提琴。您可以尝试选择状态,然后用户名应该更改。你可以做更多的实验。。。
$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
});
};