UI.Bootstrap角度提前输入和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>

预先输入控制器

(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'];

    }

})();

数据集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; 

如果这没有帮助，您的控制台中是否有任何错误？ 您可以在JSFiddle或Codepen等中发布有效的演示吗？