UI.Bootstrap Angular Typeahead 和 Firebase 阵列

Question

好吧，我已经试了又试了，试了又试，但没成功。

我正在尝试在 UI.Bootstrap 中为 Angular JS 使用 Typeahead，并将 Firebase 数组作为数据集。

问题是，当我在文本框中键入内容时，无法显示任何结果。所以我有以下内容。

HTML

<table class="table table-hover table-striped" id="itemTable" ng-controller="typeaheadController as ty">
   <thead>
      <tr>
        <th colspan="5">
           <input type="text" ng-model="selected" typeahead="product.name for product in products | filter:{name: $viewValue}">
        </th>
      </tr>
   </thead>
</table>

Typeahead 控制器

(function () {

angular
    .module('app')
    .controller('typeaheadController', typeaheadController);

    typeaheadController.$inject = ['$firebaseAuth', '$firebaseObject', '$state', 'firebaseUrl', '$scope', '$http'];

    function typeaheadController($firebaseAuth, $firebaseArray, $state, firebaseUrl, $scope, $http) {

      $scope.selected = undefined;

      var ref = new Firebase(firebaseUrl);

      var products = ref.child("products");

      $scope.products = $firebaseArray(products);

      $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

    }

})();

DataSet Firebase 数组

{"$id":"products","$priority":null,"-Jr9RNmgtpm62DRcpzeR":{"description":"ProdcutProductProduct","name":"Test Product","pricing":{"cost":"10","markup":"20"},"sku":"029300889","type":"Product"},"-Jr9TZOI0cV9gSBi1lT4":{"description":"This is a test service.","name":"Test Service","pricing":{"cost":"100","markup":"20"},"sku":"4059834509","type":"Service"}}

我想根据每个结果的名称进行搜索。

怎么做？

Answer 1

您传递给 ui-bootstrap typeahead 指令的数据集合包含显然不涉及产品的属性，并且可能混淆了指令。在将数组提供给 typeahead 指令之前，尝试将它们从数组中清除（$id 和 $priority）：

// Store the raw response and assign the finished array, incase there are $watches on the $scope properties - we don't want to fire them for every change..
var products_raw = $firebaseArray(products);
delete products_raw.$id;
delete products_raw.$priority;
$scope.products = products_raw;

如果这没有帮助，您的控制台是否有任何错误？您可以 post 在 JSFiddle 或 Codepen 等中进行工作演示吗？

UI.Bootstrap Angular Typeahead 和 Firebase 阵列

UI.Bootstrap Angular Typeahead and Firebase Array

javascript

arrays

twitter-bootstrap

angularjs

angular-ui-bootstrap