Javascript 如何在 AngularJS Material Design 中创建一个简单的搜索输入文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34830756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a simple search input text in AngularJS material design?
提问by Diptesh Patil
I am looking for some easy way to have something similar to what is available in angular-mdl for expandable search text field as below.. This will add a search button on click it will expand to text field.
我正在寻找一些简单的方法来获得类似于 angular-mdl 中可用的用于可扩展搜索文本字段的内容，如下所示。
<!-- Expandable Textfield -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="sample6">
<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
</div>
</div>
</form>
My requirement is to have such a search button in the Card title snapped to the right when user clicks it should expand to take input.. and I need to do it in Angular-Material.
我的要求是当用户单击它时，卡片标题中的这样一个搜索按钮会向右对齐，它应该展开以获取输入..我需要在 Angular-Material 中进行。
Any inputs or help..! Thanks.
任何输入或帮助..！谢谢。
采纳答案by Dunos
I was looking for some example of an expandable search in Angular with Material too, and found this code in Codepen, but not sure if it's exactly what you look for, it opens a full length input with a back button...
我也在寻找一些在 Angular 中使用 Material 进行可扩展搜索的示例，并在 Codepen 中找到了此代码，但不确定它是否正是您要查找的内容，它会打开一个带有后退按钮的全长输入...
http://codepen.io/kyleledbetter/pen/gbQOaV
http://codepen.io/kyleledbetter/pen/gbQOaV
The HTML of the toolbar is something like this:
工具栏的 HTML 是这样的：
<md-toolbar ng-show="!showSearch">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
<ng-md-icon icon="menu"></ng-md-icon>
</md-button>
<h3>
Dashboard
</h3>
<span flex></span>
<md-button aria-label="Search" ng-click="showSearch = !showSearch">
<ng-md-icon icon="search"></ng-md-icon>
</md-button>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
</md-toolbar>
<md-toolbar class="md-hue-1" ng-show="showSearch">
<div class="md-toolbar-tools">
<md-button ng-click="showSearch = !showSearch" aria-label="Back">
<ng-md-icon icon="arrow_back"></ng-md-icon>
</md-button>
<h3 flex="10">
Back
</h3>
<md-input-container md-theme="input" flex>
<label> </label>
<input ng-model="search.who" placeholder="enter search">
</md-input-container>
<md-button aria-label="Search" ng-click="showSearch = !showSearch">
<ng-md-icon icon="search"></ng-md-icon>
</md-button>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
</md-toolbar>
回答by Fyodor
Seems like there are no clean 'native' angular material option for that, so I used one of the textfield optionsfrom 'material design lite' library - expandable search button gif-demo
似乎没有干净的“本机”角度材料选项，所以我使用了“材料设计精简版”库中的文本字段选项之一-可扩展搜索按钮 gif-demo
