角材料md-autocomplete動態加載問題

Question

我在項目中使用Angular Material組件「md-autocomplete」。

我們試圖呈現我們從「md-list」組件的項目點擊事件調用中獲得的動態響應。

問題：但是，在調用事件調用之前，將調用md-autocomplete方法。

我的要求：有沒有辦法在調用md-autocomplete方法之前調用事件調用。

在這裏，我們附上了示例圖像，顯示了您基本的響應，我們需要輸出。

我嘗試下面的代碼，但它無法正常工作。我需要解決這個問題。

HTML源代碼：

MD-列表代碼

<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

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