Question

以下是我用于指令的模板。在代码中我们是从我们拥有的数据中的服务中获取数据该特定人士的资料。从我们的数据来看仅显示名字，姓氏和名称或公司从属关系。

＆＃13;

<div ng-if="model" class="entry-added">
  <span class="form-control"><b>{{model.fullName}}</b>, <br/><span class="small-font">{{(model.designation)?model.designation:model.companyAffiliation}}</span></span>
  <a ng-click="removePerson()" class="action-remove"><i class="fa fa-remove"></i></a>
</div>

<div ng-show="!model" class="input-group">
  <input type="text"
         class="form-control"
         name="{{name}}"
         id="{{name}}"
         placeholder="{{placeholder}}"
         ng-required="{{isRequired}}"
         typeahead-on-select = "change($item, $model, $label)"
         ng-model="model"
         typeahead-min-length="3",
         typeahead="suggestion for suggestion in searchEmployees($viewValue)"
         typeahead-template-url="typeAheadTemplate.html"
         typeahead-loading="searching"
         typeahead-editable="false">

<script type="text/ng-template" id="typeAheadTemplate.html">
  <a class="ui-corner-all dropdown" tabindex="-1">
    <div class="col-md-2"><img class="dropdown-image" ng-src="https://people.***.com/Photos?empno={{match.model.employeeNumber}}"></div>
    <div>
      <div bind-html-unsafe="match.model.fullName"></div>
      <div bind-html-unsafe="match.model.designation"></div>
    </div>
  </a>
</script>

＆＃13;

我正在使用自定义指令来显示搜索字段。下拉列表显示[object object]。

指令

// In backend taxDeptContact is a Person type object
/*
Directive code
 */
(function () {
  'use strict';
  angular.module('treasuryApp.directives').directive('employeeSearch', employeeSearch);
  employeeSearch.$inject = ['$resource', '$rootScope', 'ErrorHandler'];

  function employeeSearch($resource, $rootScope, ErrorHandler) {
    return {
      restrict: 'E',
      require: '^form',
      scope: {
        model: "=",
        isRequired: '@',
        submitted: "=",
        onSelect: '&',
        name: '@',
        index:'@'
      },
      link: function(scope, el, attrs, formCtrl) {
        //set required attribute for dynamically changing validations
        scope.searchEmployees = function (searchTerm) {
          var users = [];
          var myResult = [];
          var result = $resource($rootScope.REST_URL + "/user/getEmployees", {term: searchTerm}).query().$promise.then(function (value) {

            //console.log(value)
            $.each(value, function(i, o) {
              users.push(o);
            });
            return users;
          });
          return result;
        }
        scope.removePerson = function() {
          scope.model=null;
        }
        scope.userNotSelectedFromTypeahead = function(name) {
          if(undefined === formCtrl[name]) {
            return false;
          }
          return formCtrl[name].$error.editable;
        };
        scope.change = function(item, model, label) {
            scope.model = item
            scope.onSelect(
              {name: scope.name, person: scope.model});
        },

      templateUrl: 'app/components/common/directives/employee-search.tpl.html'
    };
  }
})();

查看使用指令

<div class="form-group">
    <label class="col-sm-3>Tax Dept Contact</label>
    <div class="col-sm-4">
        <employee-search model="reqCtrl.requestObj.taxDepartmentContact" name="taxDeptContact" is-required="false" submitted="reqCtrl.submitted"/>
    </div>
</div>

发生错误的图片

Answer 1

看起来这可能是你的麻烦点

typeahead="suggestion for suggestion in searchEmployees($viewValue)"

suggestion for suggestion正在拉动整个对象。您是否尝试过显示suggestion的特定属性？

例如：如果你有一个suggestion.name属性，你会写：

typeahead="suggestion.name for suggestion in searchEmployees($viewValue)"

Answer 2

终于得到了答案：我在我的指令中使用了autocomplete =“off”，那就是

<th><input st-search='name' type='search'/></th>

＆＃34; [对象对象]＆＃34;双击输入

2 个答案: