Угловой материал Autocomplete от URL

Я дошел до того, что ожидал, но что-то не работает, как я хочу. Я имею в виду каждый раз, когда я заполняю ввод новыми буквами, все JSON читаются снова, и я ожидаю, что загрузим JSON через HTTP-запрос и примените фильтры непосредственно к предварительно загруженным данным.Угловой материал Autocomplete от URL

Мой код ниже.

Контроллер

(function() { 
    'use strict'; 
    angular.module('MyApp').controller('DemoCtrl', DemoCtrl); 

    function DemoCtrl($timeout, $q, $log, $http) { 
     var self = this; 
     self.simulateQuery = false; 
     self.isDisabled = false; 
     self.querySearch = querySearch; 
     self.selectedItemChange = selectedItemChange; 
     self.searchTextChange = searchTextChange; 

     function querySearch(query) { 
      return $http.get("data.json").then(function (result) { 
       var results = query ? result.data.filter(createFilterFor(query)) : result.data, 
        deferred; 
       return results; 
      }) 
     } 

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

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

     function createFilterFor(query) { 
      // var lowercaseQuery = angular.lowercase(query); 
      var lowercaseQuery = query; 
      return function filterFn(item) { 
       return (item.NAME.indexOf(lowercaseQuery) === 0); 
      }; 
     } 
    } 
})();

Html

<html> 

<head> 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js'> 


    </script> 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js'> 


    </script> 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js'></script> 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js'></script> 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js'></script> 
    <script src='https://gitcdn.xyz/repo/angular/bower-material/v0.11.0/angular-material.js'></script> 
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script> 
    <script src='script.js'></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> </head> 
<link rel="stylesheet" href="style.css"> </head> 

<body> 
    <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoCustomTemplate" ng-app="MyApp"> 
     <md-content layout-padding="" layout="column"> 
      <form ng-submit="$event.preventDefault()"> 
       <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.NAME" md-min-length="0" placeholder="Pick an NAME" md-menu-class="autocomplete-custom-template"> 
        <md-item-template> <span class="item-title"> 

      <span> {{item.NAME}} </span> </span> <span class="item-metadata"> 
      <span class="item-metastat"> 
       <strong>{{item.Environnement}}</strong> 
      </span> <span class="item-metastat"> 
       <strong>{{item.Location}}</strong> 
      </span> </span> 
        </md-item-template> 
       </md-autocomplete> 
      </form> 
     </md-content> 
    </div> 
</body> 

</html>

data.json

[ 
    { 
    "NAME":"name1", 
    "Environnement":"Environnement1", 
    "Location":"Location1" 
    }, 
    { 
    "NAME":"name2", 
    "Environnement":"Environnement2", 
    "Location":"Location2" 
    } 
]

Другое дело, моя CSS не применяется.

plnkr: http://plnkr.co/edit/euKrNhMmWGzIx5TnR24L?p=preview

Спасибо заранее.

источник

2015-09-22 Widy

Таким образом, вы хотите сказать, вы хотите только один раз загрузить данные из 'запроса $ http' во всем приложении, хранить его в переменной , а затем применить фильтр к переменной, верно? Если это так, у меня может быть решение. –

@MohitAdwani Да, это все. – Widy

-1

Я хотел бы предложить следующий код:

JS: (ОБНОВЛЕНО)

function DemoCtrl($timeout, $q, $log, $http) { 
    var array=[]; 
    var self = this; 
    $http.get("data.json").then(function (result) { 
     array = result.data; 
     init(); 
    function init(){ 
     //all other code will come inside this function 
     function querySearch(query) { 
       var results = query ? array.filter(createFilterFor(query)) :array; 
       return results; 
     } 

    } 
}

Попробуйте это. Это то, что я делаю в своем коде. И я использую переменную $ scope вместо self и this. Но с тобой все будет хорошо. Дайте мне знать в комментариях, если возникнут некоторые ошибки.

UPDATE

Вот plunkr: http://plnkr.co/edit/93nzzI?p=preview

источник

2015-09-25 13:53:12

Не могли бы вы сделать этот workrariund в начальном plnkr: http://plnkr.co/edit/euKrNhMmWGzIx5TnR24L?p=preview? – Widy

@ Види Конечно. Обновит вас завтра. –

Я обновил свой plnkr: http://plnkr.co/edit/euKrNhMmWGzIx5TnR24L?p=preview с предлагаемой модификацией, но я удалил init(). Не могли бы вы сообщить, знаете ли все, соответствуют ли все? – Widy

Ваш метод loadAll() возвращает обещание, а не массив; поэтому у вас нет функции «фильтра». Вы должны выполнить фильтрацию внутри обещания. Возможно, что-то вроде этого:

function querySearch(query) { 
    return loadAll() 
    .then(function (repos) { 
     self.repos = repos.filter(createFilterFor(query)); 
    }); 
}

источник

2015-09-22 17:16:11 Roger

@ Widy Да, дело в том, как вы смешиваете типы данных между обещаниями и массивами. Вот вилка с небольшими изменениями, ничего очень функциональная, вы должны ее заполнить: http://plnkr.co/edit/YxNB7I7KC00OTAv2qSRH?p=preview – Roger

Я нашел обходное решение для получения данных из URL-адреса, но у меня все еще есть проблема, потому что это вызывается каждый раз (get data.json): http://plnkr.co/edit/euKrNhMmWGzIx5TnR24L?p=preview любое предложение? – Widy

Угловой материал Autocomplete от URL

ответ

Смежные вопросы