1

ngTagsInput で利用可能な autoComplete を使用してカスタム オート コンプリート ディレクティブを作成しています。しかし、autoComplete のテンプレート内の親コントローラーからデータにアクセスする必要があります。$parent を使用してみましたが、うまくいきません。私は単純なプランカーを作成しました。

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;
      });

  };
});

ここにプランカーのリンクがあります：

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

見出しとして表示するフィールドを指定し、対応する表示名ですべての小見出しを表示する必要があります。

4

0 に答える 0