AngularUI Boostrap typeahead не выбирает при нажатии элемента

Я новичок в Angular и имею проблемы с набором инструментов начальной загрузки AngularUI, когда щелчок по элементу в раскрывающемся списке не заполняет текстовое поле полным значением. Выпадающий список исчезает при нажатии, и остаются только набранные символы.

Вот код (начните вводить «шпион» в текстовое поле)

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

<body>
  <div data-ng-controller="AssetCtrl">
    <br />
    <input type="text" ng-model="selected" typeahead="asset.ticker as typeaheadLabel(asset) for asset in assets | filter:{ticker:$viewValue}" class="form-control">

  </div>



  <script>
    var ConsoleApp = angular.module('ConsoleApp', ['ui.bootstrap']);
    function AssetCtrl($scope) {
      $scope.assets = [{
        "assetClass": "stock",
        "ticker": "spy",
        "description": "S&P"
      }];

      $scope.typeaheadLabel = function(item) {
        return item.ticker.toUpperCase() + ' (' + item.assetClass + ') - ' + item.description;
      };
    }

    ConsoleApp.controller('AssetCtrl', AssetCtrl);
  </script>
</body>

javascript angularjs twitter-bootstrap angular-ui
person FinDev    schedule 23.07.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Похоже, проблема заключается в функции typeaheadLabel, которая вычисляется при вычислении значения модели, и часто item приходит как null. Вы можете добавить некоторые защитные нулевые проверки для функции метки, чтобы оценка значения не была нарушена, потому что это то, что typeahead фактически соответствует значению модели как: -

Фрагмент из TypeAhead

return {
        itemName:match[3],
        source:$parse(match[4]),
        viewMapper:$parse(match[2] || match[1]), //<-- here if the function evaluation is undefined which is in your case it will take the value of ticker propery as modelValue
        modelMapper:$parse(match[1])
      };

WorkAround1: -

  $scope.typeaheadLabel = function(item) {
    if(!item || !item.ticker) return;
    return item.ticker.toUpperCase() + ' (' + item.assetClass + ') - ' + item.description;
  };

Plnkr

Другой способ, который я бы предложил, - это добавить свойство displayName в сам viewModel. Бывший:-

Вариант 2:

   $scope.assets = [{
        "assetClass": "stock",
        "ticker": "spy",
        "description": "S&P"
      },{
        "assetClass": "stock",
        "ticker": "asd",
        "description": "A&D"
      }].map(typeaheadLabel);


      function typeaheadLabel(item) {
        item.displayName = item.ticker.toUpperCase() + ' (' + item.assetClass + ') - ' + item.description;
        return item;
      };

и укажите displayName как псевдоним asset.ticker as asset.displayName for asset in assets

Plnkr2

person PSL    schedule 23.07.2014
comment
Спасибо, это очень помогло! Ваше второе решение (displayName) работает только с Angular 1.2, а не с текущей бета-версией 1.3.x. Я не уверен, почему, но как только я изменил это и включил ваше решение, все заработало, как показал Plnkr. - person FinDev; 23.07.2014