md-autocomplete - 删除建议中的选定项目

时间:2017-01-02 04:38:35

标签: javascript angularjs angular-material md-autocomplete

当用户选择了一个项目并被标记为收藏时,我试图删除md-item建议。这里要澄清的问题是下面的结构。

假设我们有states的结构。

function loadAll() {

      var allStates = [
          {
             display : Alabama,
             value : alabama,
             is_favorite : false
          },
          {
             display : Alaska,
             value : alaska,
             is_favorite : false
          },
          {
             display : California,
             value : california,
             is_favorite : false
          },
          {
             display : Colorado,
             value : colorado,
             is_favorite : false
          },
          {
             display : Florida,
             value : florida,
             is_favorite : false
          },
          {
             display : Georgia,
             value : georgia,
             is_favorite : false
          },
      ];

      return allStates;
}

当用户选择我将其放在函数md-selected-item-change上的对象时,我就是将状态标记为收藏夹。

function selectedItemChange(object) {
    if (object) {
        object.is_favorite = true;
    }
}

现在可以更改createFilterFor()以在选择特定状态后从结果中排除is_favorite == true的状态吗?

function createFilterFor(query) {
  var lowercaseQuery = angular.lowercase(query);

  return function filterFn(state) {
    return (state.value.indexOf(lowercaseQuery) === 0);
  };

}

这是我迄今为止所尝试过的,但它并没有呈现正确的结果。

return (state.value.indexOf(lowercaseQuery) === 0 && state.is_favorite == false);
  

更新

CODEPEN DEMO

2 个答案:

答案 0 :(得分:3)

有一个简单的解决方法:

md-items="item in ctrl.querySearch(ctrl.searchText)| filter:{ is_favorite:false }"

您所要做的就是将过滤器放在控件的源代码中。

请检查代码笔:http://codepen.io/ash972/pen/ZLYNPM

答案 1 :(得分:1)

创建一个这样的函数:

function filterFavotites(item) {
  return !item.is_favorite;
}

在返回结果之前在querySearch中调用它:

function querySearch (query) {
  var results = query ? vm.states.filter( createFilterFor(query) ) : vm.states,
      deferred;

  results = results.filter(filterFavotites);

  return results;
}