使用 angularjs 显示/隐藏元素答案

【问题标题】：Show/hide element with angularjs使用 angularjs 显示/隐藏元素
【发布时间】：2015-02-12 18:46:03
【问题描述】：

您好，当我使用 ng-click 和 ng-show 以角度单击按钮时，我想显示和隐藏 div 元素。这是我的代码：

HTML

 <ons-page ng-controller="search">          
      <ons-button class="ion-android-search" ng-click="showDetails = ! showDetails"></ons-button>
      <input ng-show="showDetails" type="search" class="search-input" ng-model="search" placeholder="Buscar">
 </ons-page>

var app = angular.module('app');    
app.controller('search', function($scope){
    $scope.showDetails = true;
});

我尝试使用这个示例代码：http://jsfiddle.net/asmKj/

这是我的项目：http://recorramisiones.com.ar/rutadelaselva/app/，进入“alojamientos”菜单项查看我的问题。

谢谢！

【问题讨论】：

对不起，不显示搜索 div...
您的控制器中有此代码吗？我想你会的。此外，如果您阅读了 ngInit 文档 docs.angularjs.org/api/ng/directive/ngInit，则不应为此使用 ng-init。
您的代码按原样工作。 jsfiddle.net/isherwood/asmKj/373
我不知道如何使用 ng-init。我只是按照您的指示...我只是尝试按照我的问题中的示例进行操作。
@isherwood 在您的示例中效果很好，但在我的项目中不，我不知道为什么

标签： angularjs

【解决方案1】：

该按钮不在您的ng-controller 中。

这部分：

<ons-button class="ion-android-search ng-isolate-scope button effeckt-button button--large--cta slide-left" style="font-size:20px;" modifier="large--cta" ng-click="showDetails = ! showDetails">

在这部分之前定义：

<div ng-app="" ng-controller="search" class="ng-scope">

因此，当您尝试修改 showDetails 时，它不会执行任何操作。

【讨论】：

我更新了我的问题，ng-controller 是在 ons-button 之前声明的。
现在我正在查看您的网站，按钮上没有ng-click，输入上没有ng-show，也没有ng-controller="search"。唯一的ng-controller 位于<div class = "app-page alojamientos-page ng-scope">