Question

好吧，我已经尝试并试图让这一个正确，但是没有。

我正在尝试在UI.Bootstrap中使用Typeahead，用于Angular JS，并使用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 Controller

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

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

UI.Bootstrap Angular Typeahead和Firebase数组

1 个答案: