Показать/скрыть Div, если выбран вход автозаполнения

Question

У меня есть два поля автозаполнения с угловым материалом, добавленные как shown here, и он работает до сих пор.

Кодекс автозаполнения:

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 только если значение выбрано из раскрывающегося списка автозаполнения?

Answer 1

Вы должны использовать эту модель, которая сохраняет выбранное значение для автозаполнения:

автозаполнения:

<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>