繁体   English   中英

angular.js将jquery自动完成对象绑定到ng-model,将值输入到对象的属性

[英]angular.js binding jquery autocomplete object to ng-model, input value to property of object

我在我的应用程序中使用angular.js和jquery自动完成功能。 因此,我想创建一个有角度的指令,该指令包装jQuery自动完成功能:

'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=..

这是一个测试: 小提琴

当未为input定义ng-model时, value=..属性起作用

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM