Angular Material 从 URL 自动完成

Question

我完成了我的预期，但有些事情并不如我所愿。我的意思是每次我用新字母填充输入时，所有 JSON 都会被再次读取，我期望的是通过 http 请求加载 JSON 并直接在预加载数据上应用过滤器。

下面是我的代码。

控制器

 (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

提前致谢。

Answer 1

您的 loadAll() 方法 returns 一个承诺，而不是一个数组；这就是为什么您没有 "filter" 函数的原因。您必须在承诺中进行过滤。也许是这样的：

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

Answer 2

我建议使用以下代码：

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。但它应该适合你。如果出现错误，请在评论中告诉我。

更新

这里是 plunkr : http://plnkr.co/edit/93nzzI?p=preview

Angular Material 从 URL 自动完成

Angular Material Autocomplete from URL

httprequest

angularjs

angular-material