如果选择了自动完成输入,则显示/隐藏Div

Show/Hide Div if autocomplete input is selected

本文关键字:显示 Div 隐藏 输入 选择 如果      更新时间:2023-09-26

我添加了两个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>