angular.js将jquery自动完成对象绑定到ng模型,将值输入到对象的属性
angular.js binding jquery autocomplete object to ng-model, input value to property of object
我在我的应用程序angular.js和jquery autocomplete中使用。因此,我想创建一个angular指令,它包装jquery autocomplete:
'use strict'
angular.module('nsi')
.directive('autoComplete', function () {
return {
restrict: 'A',
scope: {
httpService: "=",
renderItem: '=',
ngModel: '=',
minLength: '=',
onSelect: '='
},
link: function (scope, elem) {
elem.autocomplete({
source: function (request, response) {
scope.httpService(request.term).then(function (data) {
response(
$.map(data.items, function (item) {
return scope.renderItem(item);
}
)
);
});
},
minLength: scope.minLength,
select: function (event, ui) {
if (scope.onSelect) {
scope.onSelect(ui.item.item);
}
scope.$apply(function () {
scope.ngModel = ui.item.item;
});
}
})
;
}
};
});
在我的控制器中,我初始化它的必要参数:
$scope.supplierRender = function(item){
return {
label: item.supplierName,
value: item.supplierName,
item: item
}
};
$scope.httpSupplierService = function(suggest){
return SupplierService.getSuppliers('%' + suggest + '%');
};
$scope.supplierSelect = function(val) {
$scope.employee.supplier.id = val.id;
};
在我的html视图中,我启动我的指令:
<input type="text"
auto-complete
min-length="3"
http-service="httpSupplierService"
render-item="supplierRender"
on-select="supplierSelect"
ng-model="employee.supplier"
class="form-control"
value="employee.supplier.supplierName" />
问题是,当我在编辑窗口中打开我的员工时,在自动完成输入中,我会看到[object Object]
。因此,问题是:"如何将ngModel绑定到employee.Supplier",以及输入到对象(employee.supplier.supplierName
)特定字段的值
尝试设置ng-model
:
ng-model="employee.supplier.supplierName"
通常<input>
从指令ng-model
中获取值,因此您不需要提供value=..
这是一个测试:Fiddle
当未为input
定义ng-model
时,value=..
属性有效
相关文章:
- 如何使用Javascript客户端对象模型检索Sharepoint 2010列表项权限
- 使用Javascript对象模型
- JavaScript具有从响应生成的角度嵌套对象模型(无限深)
- 任何学习Javascript浏览器对象模型的好地方
- 通过Javascript的MS Word对象模型:邮件合并
- 如何使用 JavaScript 对象模型以编程方式将 SharePoint 客户端 Web 部件 (AppPart) 添
- 文档对象模型问题
- 客户端对象模型调用context.executeQueryAsync:将项添加到列表后,在onQuerySuccesse
- Mongodb,在插入新值之前检查对象/模型的数组
- 访问Excel's对象模型
- 如何用javascript为html菜单创建可读的对象模型
- 尝试使用cucumber.js实现页面对象模型时出错
- SharePoint客户端对象模型-如何读取多个网站中具有相同名称的列表
- SharePoint 2013上的Javascript对象模型未加载
- 探索Rally对象模型的最简单方法是什么
- InDesign对象模型:当前页面的数目
- 使用ECMAScript/JavaScript对象模型按内部名称获取SharePoint列表
- Angular指令-选择下拉数组或对象模型
- 读取和操作来自不同域的父节点的ifame's文档对象模型
- 如何在sharepoint客户端对象模型中获得由字段创建的显示名称