ng-tags-input не может выбрать опцию из автозаполнения

0

У меня есть проблема в этой директиве; первый из них заключается в том, что я не вижу ни одного элемента в списке. Тогда иногда он говорит, что ngRepeat имеет повторяющиеся значения, а затем даже если я могу увидеть что-то, что я не могу выбрать и поместить его на вход! Как это возможно? Здесь плункер

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

Кстати, это часть html-кода:

<body ng-controller="MainCtrl">
    <tags-input ng-model="tags"add-from-autocomplete-only="true">
      <auto-complete min-length="1"
                    source="loadTags($query)"
                    template="my-custom-template"></auto-complete>
    </tags-input>
    <p>Model: {{tags}}</p>

     <script type="text/ng-template" id="my-custom-template">
        <div class="right-panel>
            <span ng-bind-html="$highlight($getDisplayText())"></span>
            <h1 style="font-size: 15px!important" class="uk-margin-remove">
                {{data.name}}
            </h1>
        </div>
    </script>

  </body>

И вот угловое:

var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [];


  $scope.loadTags = function(query) {

            return $http.get('tags.json', {
                cache: true
            }).then(function(data) {
                $scope.names = data.data.data;

                return $scope.names;
            });
        };

});
Теги:
ng-tags-input

3 ответа

1

Я работал над вашей проблемой и нашел решение простым способом. Я тестировал его, и он работает. Надеюсь, это то, что вы ищете.

Файл углового скрипта

var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [];
  $scope.names = [];


  $scope.loadTags = function() {

            return $http.get('tags.json').then(function(response) {
              var data = response.data.data.data;
              $scope.names = [];

              for (var tag in data)
              {
                $scope.names.push(data[tag].name);
              }

                return $scope.names;
            });
        };

});

HTML файл

<tags-input ng-model="tags" add-from-autocomplete-only="true">
<auto-complete min-length="1"
        source="loadTags()"
        template="my-custom-template"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>
Поделиться
  • 0
    Спасибо, мужик, завтра я проверю твоё решение. Надеюсь, оно сработает. Кстати, я дам вам знать завтра. Спасибо!
  • 0
    Это решение неоправданно сложное, поскольку оно вынуждает вас писать код, который преобразует исходные данные. Элемент управления тегами достаточно гибок, чтобы позволить вам переопределять имена свойств, чтобы вам не приходилось писать эту дополнительную логику.
0

использовать этот плункер

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

используйте key-property = "id" and display-property="name для удаления ошибки дублирования и для отображения списка

Поделиться
0

Ваш код выглядит хорошо. Единственная проблема, которую я вижу, заключается в том, что в ваших тегах.json, ваши объекты data.data должны быть в виде {id: idVal, text: nameVal}. То есть имя поля отображения должно быть "text" вместо "name".

Поделиться
  • 0
    Таким образом, эта директива работает только с текстовым полем в json?
  • 0
    Вы можете переопределить это, установив для свойства display-property значение display-property = "name" в директиве ввода тега.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню