Question

我正在使用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>

app.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

我需要指定哪个字段显示为标题，并显示所有副标题及其对应的显示名称。

使用ngTagsInput

0 个答案: