UI.Bootstrap Angular Typeahead and Firebase Array



好吧,我试了又试,试了又试,试着把这个做好,但是没有。

我试图在UI中使用提前输入。用Firebase Array作为数据集启动Angular JS。

问题是,当我在文本框中输入时,我无法得到任何结果显示。下面是我得到的。

<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控制器/strong>

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

{"$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"}}

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

如何?

你传递给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等发布一个工作演示吗?

最新更新