angularjs - Angular Material md-自动完成动态加载问题

Question

我在我的项目中使用了 Angular Material 组件“md-autocomplete”。

我们正在尝试呈现我们从“md-list”组件的 item-click 事件调用中获得的动态响应。

问题:但是，在调用事件调用之前，会调用 md-autocomplete 方法。

我的需求:有没有办法在调用 md-autocomplete 方法之前调用事件调用。

在这里，我们附上了示例图像，它向您展示了我们需要作为输出的基本响应。





我试过下面的代码，但它不起作用。我需要解决这个问题。

HTML 源代码:

md-list 代码

<md-list>
    <div ng-repeat="object in ['object 1', 'object 2', 'object 3', 'object 4', 'object 5', 'object 6'] track by $index">
        <md-list-item class="md-2-line contact-item" ng-click="listItemClick($event, object)">
            <div class="md-list-item-text compact">
                <h3>Object data displayed here like object 1, object 2 and etc ...</h3>
            </div>
        </md-list-item>
    </div>
</md-list>

md-自动完成代码:

<md-autocomplete
        ng-disabled="isDisabled"
        md-no-cache="noCache"
        md-selected-item="selectedItem"
        md-search-text-change="searchTextChangeEvent(searchText)"
        md-search-text="searchText"
        md-selected-item-change="selectedItemChangeEvent(item)"
        md-items="item in search(searchText)"
        md-item-text="item.id"
        md-min-length="0"
        placeholder="Search by id ..."
        md-menu-class="autocomplete-custom-template">
        <md-item-template>
            <span class="item-title">
                {{id}}
            </span>
        </md-item-template>
</md-autocomplete>

AngularJS 脚本代码:

(function() {

        var app = angular.module('module-name');

        var controller = function($scope, $rootScope,$http, $timeout, $q, $log) {

            var self = this;

            self.simulateQuery = false;
            self.isDisabled    = false;

            $rootScope.objectName = "object 1";

            self.response = loadValues($rootScope.objectName);
            self.search = search;
            self.selectedItemChangeEvent = selectedItemChangeEvent;
            self.searchTextChangeEvent = searchTextChangeEvent;

            // ******************************
            // Internal methods
            // ******************************

            /**
             * Search for repos... use $timeout to simulate
             * remote dataservice call.
             */
            function search (query) {

                var results = query ? self.response.filter( createQueryFilterFor(query) ) : self.response,
                  deferred;
                if (self.simulateQuery) {
                    deferred = $q.defer();
                    $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
                    return deferred.promise;
                } else {
                    return results;
                }
            }

            function searchTextChangeEvent(text) {
              $log.info('Text changed to ' + text);
            }

            function selectedItemChangeEvent(item) {
                $log.info('Item changed to ' + JSON.stringify(item));
            }

            /**
             * Build `components` list of key/value pairs
             */
            function loadValues(name) {

                var dynamicData = '';

                if(name === "object 1") {
                    dynamicData = [{
                        "id": 1,
                        "name": "some name here"
                    },{
                        "id": 2,
                        "name": "some name here"
                    }];
                } else if(name === "object 2") {
                    dynamicData = [{
                        "id": 3,
                        "name": "some name here"
                    },{
                        "id": 4,
                        "name": "some name here"
                    }];
                } else if(name === "object 3") {
                    dynamicData = [{
                        "id": 5,
                        "name": "some name here"
                    },{
                        "id": 6,
                        "name": "some name here"
                    }];
                }

                return dynamicData.map( function (response) {
                    response.value = response.id.toLowerCase();
                    return response;
                });
            }

            /**
             * Create filter function for a query string
             */
            function createQueryFilterFor(query) {

              var lowercaseQuery = angular.lowercase(query);

              return function filterFn(item) {
                return (item.value.indexOf(lowercaseQuery) === 0);
              };
            }


            $scope.listItemClick = function(event, object) {

                $rootScope.objectName= object.someFiledName; // It will give md-list-item name (like object 1 or object 2 and etc ...)

                self.response = loadValues($rootScope.name);
            }
        };

        app.controller("controller", controller)
    }());

Answer 1

我已经使用了您的代码并创建了一个 plunkr 演示。我调整了几个地方，请随意探索 plunkr 中的代码。现在建议正在根据所选对象加载。

根据您在此处提到的用例，我认为过滤器逻辑不正确，因此我更正了 createQueryFilterFor 函数逻辑。我在 md-item-template 中进行了更改节也是。

function createQueryFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(item) {
        //below condition updated to match search id
        return (item.value.toString() === lowercaseQuery);
      };
    }

see demo