アンギュラマテリアルmdオートコンプリートダイナミックローディングの問題

Question

私のプロジェクトでは、アンギュラマテリアルコンポーネント "md-autocomplete"を使用しています。

"md-list"コンポーネントのitem-clickのイベントコールから得られる動的応答をレンダリングしようとしています。

問題：ただし、イベントコールが呼び出される前に、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

私はあなたのコード内でいくつかの問題を修正し、別の答えにコメントごとにホバリングし、ダブルクリックの問題を修正しました。あなたがのデモを見つけることができます

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; 
}); 

：それは$rootScopeに値を設定するのではなく、共有サービスを使用するより良い練習と考えられているコントローラ間で通信するためhttp://codepen.io/anon/pen/ryXyxj

注：

はここにあなたの更新されたコードですここでサービスを介して通信する2つのコントローラ：https://stackoverflow.com/a/42408380/1544886