不显示在温泉UI和angularjs DIV [英] Doesn't show div in onsen ui and angularjs

问题描述

在我的应用我试图表明我的搜索格在我的工具栏。现在我的搜索栏是从外面我的工具栏和工作正常（显示，当我在我的搜索按钮点击隐藏）。当我试图把我的搜索栏到我的工具栏我的搜索按钮不工作（犯规显示）。

in my app i try to show my search div into my toolbar. Now my searchbar is outside from my toolbar and works fine (show and hide when i click on my search button). When i try to put my searchbar into my toolbar my search button doesnt work (doesnt show).

我的HTML code：

My html code:

 <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

app.js

$scope.collapsed = false;

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

在从Alojamientos菜单项中的网络例如： http://recorramisiones.com.ar/rutadelaselva/ APP2 /

web example in "alojamientos" menu item: http://recorramisiones.com.ar/rutadelaselva/app2/

非常感谢

推荐答案

如果你真的想将其放到工具栏，我想应该是这三个位置类里面的，是这样的：

If you really want to put it into the toolbar, I think it should be inside one of the three position classes, something like this:

<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-风格或纳克级来增加或减少工具栏时的高度显示或隐藏搜索栏和改变一切你需要的。

Then you can use ng-style or ng-class to increase and decrease the height of the toolbar when you show or hide the searchbar and change anything else you need.

另一种可能是给你的搜索栏的分区工具栏与外观类=导航栏搜索栏，然后删除实际工具栏底部边框和调整任何你需要的。 ESPERO阙德SIRVA ayuda。

Another possibility would be to give to your searchbar's div the appearance of the toolbar with class="navigation-bar searchbar", and then delete the bottom border of the actual toolbar and adjust anything you need. Espero que sirva de ayuda.

这篇关于不显示在温泉UI和angularjs DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！