1

我正在使用 ngTagsInput 中可用的 autoComplete 创建自定义自动完成指令。但我需要从 autoComplete 模板内的父控制器访问数据。我尝试使用 $parent 但它不起作用。我创建了一个简单的 plunker。

html:

<body ng-controller="MainCtrl">
    <tags-input ng-model="tags" display-property="{{config.field}}" placeholder="Add a country" replace-spaces-with-dashes="false">
      <auto-complete source="loadCountries($query)"
                     min-length="0"
                     load-on-focus="true"
                     load-on-empty="true"
                     max-results-to-show="32"
                     template="my-custom-template"></auto-complete>
    </tags-input>

    <script type="text/ng-template" id="my-custom-template">
      <div class="left-panel">
        <img ng-src="http://mbenford.github.io/ngTagsInput/images/flags/{{data.dp}}" />
      </div>
      <div class="right-panel">
        <span ng-bind-html="$highlight($getDisplayText())"></span><br>
        <span>{{$parent.config.section}} : {{data.lName}}</span>
      </div>
    </script>
  </body>

应用程序.js

var app = angular.module('plunker', ['ngTagsInput']);
    app.controller('MainCtrl', function($scope, $http) {
      $scope.tags = [];

  $scope.config = {
      field:'name',
      // sections:[{
            // name:'lNm',
            // displayName:'Last Name'
        // }]
      section:'lName'
  };

  $scope.loadCountries = function($query) {
    var data = [
    { "name": "France", "dp": "Algeria.png", "lName": "thomas"},
    { "name": "Micheal", "dp": "Algeria.png", "lName": "George"},
    { "name": "Thomas", "dp": "Algeria.png", "lName": "cook"},
    { "name": "Robin", "dp": "Algeria.png", "lName": "Hood"}
    ]
      return data.filter(function(country) {
        return country.name.toLowerCase().indexOf($query.toLowerCase()) != -1;
      });

  };
});

这是 Plunker 链接：

http://plnkr.co/edit/Tz8w4GxxG5SnmKCL1gt6?p=preview

我需要指定要显示为标题的字段并显示所有子标题及其相应的显示名称。

4

0 回答 0