md-contact-chips返回搜索过滤器不起作用

时间:2017-02-21 03:42:46

标签: javascript angularjs angular-material

我似乎没有过滤查询搜索。我想查询任何案例的搜索,而不是小写的查询搜索。所以这是谷歌原始代码的修改版本。

    function querySearch(query) {
      var results = query ?
        self.allContacts.filter(createFilterFor(query)) : [];
      return results;
    }  
    function createFilterFor(query) {
      return function filterFn(contact) {
        return (contact.indexOf(query) != -1);
      };
    }

请参阅我的尝试小提琴:https://codepen.io/hamsaya/pen/PWMNNL?editors=1010

1 个答案:

答案 0 :(得分:0)

我以不同的方式创建它来检查

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

  function DemoCtrl() {
    var self = this;

    self.querySearch = querySearch;
    self.contacts = [];
    self.filterSelected = [];

    function querySearch(query) {
      var results = query ?
        createFilterFor(query) : [];
      console.log(results)
      return results;
    }


    self.allContacts = [{
      id: '1',
      name: 'Oddr Sarno'
    }, {
      id: '2',
      name: 'Hidi Barno'
    }];
    var contact = [];

     function createFilterFor(query) {
       contact = [];
       debugger
       for(var i=0; i<=self.allContacts.length -1; i++){
         if(self.allContacts[i].name.indexOf(query) != -1){
           contact.push(self.allContacts[i]);
         }
       }
       return contact;
    }
  }
})();

<div ng-controller="ContactChipDemoCtrl as ctrl" layout="column" class="chipsdemoContactChips" ng-app="MyApp">
{{ctrl.allContacts}}
  <md-content class="md-padding autocomplete" layout="column">
    <p>Contact Chips.</p>
    <md-contact-chips 
                      ng-model="ctrl.contacts" 
                      md-contacts="ctrl.querySearch($query)" 
                      md-contact-name="name"  
                      md-contact- md-require-match="" 
                      filter-selected="ctrl.allContacts.id" 
                      placeholder="To">
    </md-contact-chips>  

  </md-content>
</div>

createFilterFor函数中我只根据搜索查询推送项目并将过滤数据返回给html。

另外,html将md-contact-name改为name