如果选择了自动完成输入,则显示/隐藏Div
Show/Hide Div if autocomplete input is selected
我添加了两个Angular Material自动完成字段,如图所示,到目前为止运行良好。
自动完成代码:
HTML:
<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.searchText2)"
md-search-text="ctrl.searchText2"
md-selected-item-change="ctrl.selectedItemChange(item)"
md-items="item in ctrl.querySearch(ctrl.searchText2)"
md-item-text="item.display"
md-min-length="1"
md-floating-label="Destination"
ng-model="destiFlight">
<md-item-template>
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No states matching "{{ctrl.searchText}}" were found.
</md-not-found>
</md-autocomplete>
</form>
JS:
.controller('someCtrl', someCtrl);
function someCtrl($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
// list of `state` value/display objects
self.states = loadAll();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.newState = newState;
function newState(state) {
alert("Sorry! You'll need to create a Constituion for " + state + " first!");
}
// ******************************
// Internal methods
// ******************************
/**
* Search for states... use $timeout to simulate
* remote dataservice call.
*/
function querySearch(query) {
var results = query ? self.states.filter(createFilterFor(query)) : self.states,
deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () {
deferred.resolve(results);
}, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
self.selectedItem3=item;
$log.info('Item changed to ' + JSON.stringify(item));
}
/**
* Build `states` list of key/value pairs
*/
function loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,'
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,'
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,'
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,'
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,'
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,'
Wisconsin, Wyoming';
return allStates.split(/, +/g).map(function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
};
现在我在这两个字段下面添加了一个div,如下所示:
<div class="someDiv">
....
</div>
只有从自动完成下拉列表中选择了一个值,我才能显示div?
您应该使用存储自动完成所选值的模型:
自动完成:
<md-autocomplete
md-selected-item="mySelectedItem"
md-items="item in myList"
md-item-text="item.name"
md-min-length="0"
placeholder="Select country">
和div:
<div class="someDiv" ng-show="mySelectedItem && mySelectedItem.length != 0">
....
</div>
相关文章:
- JavaScript/jQuery:显示DIV,直到用户停止在Textbox中键入
- 在if/else语句中显示DIV
- onSubmit在php脚本的开头显示DIV
- 使用getElementsByClassName在点击时显示Div的Javascript
- 使其在悬停文本时显示Div
- 如何只在收到服务器的回复消息后显示DIV
- 隐藏/显示DIV
- 简单的多选项卡隐藏/显示DIV
- 当满足javascript/jquery条件时显示DIV(包括jsFiddle链接)
- Javascript在秒消失时显示DIV元素,并在此之后隐藏栏的选项
- 如何根据另一个 DIV 内容的可见性显示 DIV 内容
- 单击时隐藏并显示 Div
- 如果选择了所有无线电中的任何一个选项,则显示 Div
- 如何根据 Div ID 内容隐藏/显示 DIV
- 在 JQuery 对话框中隐藏和显示 Div 内容
- 检测YouTube时间然后显示DIV?使用 JavaScript
- 按自定义顺序显示 DIV
- 当用户从页面底部达到 X 像素时,如何显示 DIV
- 在提交时显示 DIV 的内容
- 单击单选选择时动态显示 DIV