不能像在angular-material示例中那样在页面上显示md-autocomplete

angularjs angular-material

7421 观看

2回复

我已经能够将角度材料自动完成指令连接到我的数据源并显示我想要的信息,但是我无法按照与此处相同的方式显示结果列表:

https://material.angularjs.org/#/demo/material.components.autocomplete

我的结果如下所示:

/files/images/469155.png

此外,当我单击离开搜索框时,自动完成建议会消失,并且不会在重新聚焦时重新出现。

我的HTML:

<div ng-controller="RoutesCtrl as ctrl" id="mainDiv" layout="column">
  <div layout="row" flex>
    <div layout="column" flex id="content">
    <md-content>
      <md-toolbar>
        <div class="md-toolbar-tools header-color">
          <md-button class="md-fab md-primary button-color" >
            <md-icon class="ng-scope ng-isolate-scope md-default-theme hamburger-icon" aria-label="Menu" style="height: 14px; width: 14px;" md-svg-src="/assets/icons/ic_menu_18px.svg"></md-icon>
          </md-button>
          <md-button class="md-icon-button" aria-label="Settings"></md-button>
          <h1 class="md-display-4"></h1>
        </div>
      </md-toolbar>
    </md-content>
    <md-content layout-padding layout="column">
      <form ng-submit="$event.preventDefault()">
        <md-autocomplete
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-selected-item-change="ctrl.selectedItemChange(item)"
        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
        md-search-text="ctrl.searchText"
        md-selected-item="ctrl.selectedItem"
        md-item-text="item.from_where + ' to ' + item.to_where"
        placeholder="Search for a route"
        md-no-cache="ctrl.noCache"
        ng-disabled="ctrl.isDisabled"
        md-min-length="3"
        md-delay="0"
        md-autoselect="true">

        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.from_where + ' to ' + item.to_where}}</span>
        </md-autocomplete>
      </form>
    </md-content>
    <div ng-controller="MapController">
      <leaflet center="center"></leaflet>
    </div>
    </div>
  </div>
</div>

我生成的html没有ng-focus属性或类“ng-scope”。

我用来获取数据的服务:

App.service('route',  function route($http, $q){
    var route = this;
    route.routeList = {};

    route.getAllRoutes = function(){
        var defer = $q.defer();

        $http.get('/routes')
                .success(function(response){
                    route.routeList = response;
                    defer.resolve(response);
                })
                .error(function(error, status){
                    defer.reject(error);
                });

        return defer.promise;
    };
    return route;
});

和控制器:

App.controller("RoutesCtrl", function($scope, route, $timeout, $q, $log, $http){

    $scope.init = function() {
        $scope.getAll();
    };




    $scope.getAll = function(){
        route.getAllRoutes()
                .then(function(response){
                    //success

                    self.routes = response;
                    return route.routeList;
                }, function(error) {
                    //error
                }, function(message) {
                    //message
                });
    };

    var self = this;
    self.searchText = null;
    self.querySearch = querySearch;
    self.simulateQuery = true;
    self.isDisabled = false;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;
    self.selectedItem = null;

    function querySearch (q) {
        var results = q ? self.routes.filter(createFilterFor(q) ) : [],
                deferred;
        if (self.simulateQuery) {
            deferred = $q.defer();
            $timeout(function() { deferred.resolve( results ); }, Math.random() * 1000, false);
        return deferred.promise;
        } else {
            return results;
        }
    }
    function searchTextChange (text) {
        $log.info('Text changed to ' + text);
    }
    function createFilterFor(query) {
        var lowerCaseQuery = angular.lowercase(query);
        return function FilterFn(route) {
            return (route.route_from_to.toLowerCase().indexOf(lowerCaseQuery) === 0);
        };
    }
    function selectedItemChange (item) {
        if (!item) {
            return
        } else {
            console.log(self.selectedItem);
            $log.info('Item changed to ' + item.route_from_to);
        }

    }


    $scope.init();
});
作者: Stephen Parker 的来源 发布者: 2019 年 7 月 15 日

回应 (2)


0

问题是由角材料0.8.3引起的。更新到最新版本修复了它。

作者: Stephen Parker 发布者: 19.04.2015 07:43

-3

更改属性: 占位符 =“搜索路径”到 md-floating-label =“搜索路径”

作者: Ferretti 发布者: 20.06.2015 04:04
32x32