Question

我正在使用Angular Material组件＆＃34; md-autocomplete＆＃34;在我的项目中。

我们正在努力呈现我们正在获得的动态响应＆＃34; md-list＆＃34;组件的项目点击事件调用。

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

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

这里我们附上了示例图片，显示了我们作为输出所需的基本响应。

object 1 related response

object 2 related response

我尝试了以下代码，但它无法正常工作。我需要解决问题的方法。

HTML源代码：

md-list code

<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-autocomplete code：

<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

Answer 2

我已修复了您的代码中的一些问题，并根据您在其他答案中的评论更正了悬停和双击问题。

以下是您的更新代码：http://codepen.io/anon/pen/ryXyxj

注意在控制器之间进行通信时，最好使用共享服务，而不是在$rootScope上设置值：

app.controller('mainController', function($scope, menuSelection) {
  $scope.menuSelection = menuSelection; // retrieve settings object from service method and bring into scope
  // now whenever one sets $scope.menuSelection.selected = "object 2", it will update the value in the other controller as well (and vice-versa)
});

app.controller('secondController', function($scope, menuSelection) {
  $scope.menuSelection = menuSelection; // retrieve settings object from service method and bring into scope
});

app.factory('menuSelection', function() {
  var settings = {};
  settings.selected = 'Object 1';  // default
  return settings;
});

您可以在此处找到通过服务进行通信的2个控制器的演示：https://stackoverflow.com/a/42408380/1544886

角度材料md-autocomplete动态加载问题

2 个答案: