Не показывает div в onsen ui и angularjs

в моем приложении я пытаюсь показать свой поисковый div на панели инструментов. Теперь моя панель поиска находится за пределами моей панели инструментов и работает нормально (показывать и скрывать, когда я нажимаю кнопку поиска). Когда я пытаюсь поместить свою панель поиска на панель инструментов, моя кнопка поиска не работает (не отображается).

Мой HTML-код:

 <ons-page ng-controller="alojamientosController" data-ng-init="getAllRecords()">
<ons-toolbar>   
  <div class="left">
    <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
  </div>
  <div class="right">
      <ons-toolbar-button ng-click="collapse()" ><ons-icon icon="ion-android-search"></ons-icon></ons-toolbar-button>
  </div>
  <div class="center">Alojamientos</div>
</ons-toolbar>
<div class="searchbar">        
  <input ng-show="collapsed" type="search" class="search-input" ng-model="search" placeholder="Buscar">
</div>
<div class="app-page alojamientos-page">
  <ons-list modifier="news">
    <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="item in items | filter:search" ng-click="showPost(item)">
      <ons-row>
        <div class="thumbnail-box is-loading" images-loaded="imgLoadedEvents">
          <img ng-show="{{ item.thumbnail_images }}" ng-src="{{ item.thumbnail_images.full.url }}" class="thumbnail" img-cache>
        </div>
      </ons-row>
      <ons-row>
        <div class="cabecera">
          <div class="name">
            {{ item.title | limitTo: 25 }}
          </div>
          <div class="location" ng-show="{{ item.categories }}">
          </div>
        </div>
      </ons-row>            
    </ons-list-item>        
  </ons-list>
  <ons-button id="moreButton" modifier="large" should-spin="{{isFetching}}" ng-click="nextPage()">more news</ons-button>
  </div>
  </ons-page>

app.js

$scope.collapsed = false;

$scope.collapse = function(){
    return $scope.collapsed=!$scope.collapsed;
}

веб-пример в пункте меню "alojamientos": http://recorramisiones.com.ar/rutadelaselva/app2/< /а>

Большое спасибо


angularjs onsen-ui
person Gaston    schedule 26.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы действительно хотите поместить его на панель инструментов, я думаю, что он должен быть внутри одного из трех классов позиций, что-то вроде этого:

<div class="center">Alojamientos 
  <div class="searchbar" style="position:absolute; left:0; right:0">        
    <input ng-show="collapsed" type="search" class="search-input" ng-model="search" placeholder="Buscar">
  </div>
</div>

Затем вы можете использовать ng-style или ng-class для увеличения и уменьшения высоты панели инструментов, когда вы показываете или скрываете панель поиска и изменяете все, что вам нужно.

Другой возможностью было бы придать div вашей панели поиска внешний вид панели инструментов с помощью class="navigation-bar searchbar", а затем удалите нижнюю границу фактической панели инструментов и настройте все, что вам нужно.

person Fran Dios    schedule 27.02.2015
comment
Большое спасибо, @fran dios, Muchas gracias fran! - person Gaston; 27.02.2015
comment
Fran, pero no me deja cambiar el largo de mi div (seachbar) porque esta dentro de mi div center, y mi div center no es de 100%. Como hago para aumentar 100% mi searchbar? - person Gaston; 27.02.2015
comment
Чтобы сделать дочерний элемент div больше, чем его родитель, вы можете использовать абсолютную позицию: <div ..... style="position:absolute; left:0; right:0">. Lo agrego а-ля respuesta. - person Fran Dios; 28.02.2015