我怎么能做md-autocomplete angularjs?

时间:2018-01-09 20:15:02

标签: javascript angularjs angularjs-material

我想使用angularjs

使用清除按钮进行自动完成

这是我的商品_this.items = [{name: "a",no:'1'}, {name: "b",no:'1'}] (我想在下拉菜单中显示姓名)



var app = angular.module('app', ['ngMaterial', 'ngMessages']);
app.controller('AppController', function ($scope,$filter) {
var _this = this;
  _this.items  = [{name: "a",no:'1'}, {name: "b",no:'1'}]
  
  _this.filteredItems = _this.items;
  _this.sentences = [];
  
  
  _this.filterItems = filterItems;
  
 
  function filterItems(searchWord) {
    console.log('filterItems');
    _this.filteredItems = $filter('filter')(_this.items, searchWord);
  }
});

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js'></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc4/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.0-rc4/docs.css'>


<div ng-controller="AppController as controller" ng-app="app" layout="column" layout-margin>
  <md-autocomplete md-selected-item="controller.selectedItem"
                   md-search-text="controller.searchText"
                   md-search-text-change="controller.filterItems(controller.searchText)"
                   placeholder="Select item"
                   md-selected-item-change="controller.itemChanged()"
                   md-items="item in controller.filteredItems"
                   md-min-length="0">
    <md-item-template>
      <span md-highlight-text="controller.searchText" md-highlight-flags="^i">{{ item }}</span>
    </md-item-template>
  </md-autocomplete>
</div> 
&#13;
&#13;
&#13;

我还添加了代码笔here 。我想列出名单中的名字。

0 个答案:

没有答案