标签: ng-hide

我试图使用AngularJS提供的ng-show和ng-hide函数显示/隐藏一些HTML .

根据文档,这些功能的用途如下:

ngHide - {expression} - 如果表达式为truthy,则元素分别显示或隐藏.ngShow - {expression} - 如果表达式是真实的,那么元素将分别显示或隐藏.

这适用于以下用例:

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

但是,如果我们使用来自对象的参数作为表达式,那么ng-hide并ng-show给出正确的true/ false值,但这些值不会被视为布尔值,所以总是返回false:

资源

<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>

结果

<p ng-hide="true">I should be hidden but I'm actually shown</p>
<p ng-show="true">I should be shown but I'm actually hidden</p>

这可能是一个错误,或者我没有正确地执行此操作.

我找不到关于引用对象参数作为表达式的任何相关信息,所以我希望任何对AngularJS有更好理解的人都可以帮助我吗？

我正在使用AngularJS 1.2.11版.我已经设置了一个工具栏,可以使用ng-Animate(显示和隐藏)进行过渡.

这是HTML:

 <div>
  <div class="full-height">
    <menu-main class="full-height pull-left"></menu-main>
    <menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
    </menu-sub>
  </div>
</div>

这是相同工具栏元素的CSS

.animate.fade-hide, .animate..fade-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
}
.animate.fade-hide, {
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-hide, .animate.fade-hide-active 
{
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-show {
    position: fixed;
    top: 100px;
        opacity: 1;
}
.animate.fade-show, .animate.fade-show-active {
    position: fixed;
    top: …

有一个角度应用程序,如果主视图是主页视图,我想隐藏其中一个"包含的视图".

<div id="page" ng-class="{ showNav: $root.showNav }">
    <header id="pageHeader" ng-controller="HeaderCtrl" data-ng-include="'views/includes/header.html'"></header>
    <div id="pageHero" ng-show='$rootScope.fullView' ng-controller="MainsearchCtrl" data-ng-include="'views/mainSearch.html'"></div>
    <div id="pageContent" ng-view=""></div>
</div>

我在AngularJS中有简单的应用程序.我想在发出AJAX请求时动态显示消息.不幸的是,它始终处于隐藏状态,我无法弄清楚原因.

HTML:

<div ng-show="message">
    <h2>show</h2>
</div>

<div ng-hide="!message">
    <h2>Hide</h2>
</div>

AngularJS控制器:

function merchantListController($scope, $http, $rootScope, $location, global) {
    $http({
        method: 'POST',
        url: global.base_url + '/merchant/list',
    }).success(function($data) {
        if ($data.status === 'success') {
            $scope.merchants = $data.data;

            $scope.$apply(function(){
                $scope.message = true;
            });
        }
    });
}

我想要一个←返回主页链接显示在我的Angular应用程序的每个页面上除了主页之外的nagivation.因此,ng-hide如果网址已经在应用的主页(视图)上,我想有条件地添加链接并隐藏它.

我尝试过使用angular的$location服务但没有成功

<p ng-hide="location.hash == '#/'" class="container"><a href="#topics">&larr; Back to Home</a></p>

我尝试了以下变化:

ng-hide="location.hash == '#/' " //console.log shows true
ng-hide="location.hash === '#/' " //console.log shows true
ng-hide="location.hash == '' "    //console.log shows false

我很困惑,因为如果我记录了我location.hash == '#/'在主页上的时间值true,那么ng-hide应该工作.

基本上我正在尝试这里列出的第三种方法: 如何根据我目前使用的页面/路线使用角度ng-hide？但它不起作用.对于我正在努力实现的目标,该页面上的另外两种方法看起来过于复杂.

我错过了什么？

我正在学习和试验Angularjs和animate.css.当ng-show为true或false时,我试图添加动画.显示和隐藏的作品,但不是动画.希望有人在这里可以告诉我我做错了什么.

这是插件.

谢谢您的帮助.

向AngularJS再次向大家寻求帮助.我正在构建一个SPA,其中我的布局(主)页面被划分为三个部分左侧导航栏,中心内容,右侧项目列表栏.我加载主页时应隐藏正确的项目列表,但应在剩余的屏幕中显示.我在homeController中创建了一个$ rootScope变量,并根据位置路径将值设置为'true',并在模板中使用该变量将值设置为ngHide.当我使用SPA导航到另一个页面时,我的右侧和左侧栏不会再次加载,只有我的中心内容会执行新视图.在将数据发送到新视图模板的控制器中加载新视图时,我将我在homeController中创建的$ rootScope变量重置为' 假',但我的右栏仍然不可见.虽然interpollat​​ion已将值更新为'true',但我可以看到ng-hidden类仍在使用.任何建议都将受到高度赞赏.

布局页面标记:

<aside class="right_bar" ng-hide="{{$root.show}}">
        <div class="my-list"><span class="f3">My Cart</span><div class=""><span class="list-count">0</span></div></div><div class="list-item"><ul></ul></div>
    </aside>  

homeController代码:

    function getHomeConfigsCtrl($http, $location, $rootScope) {

     $rootScope.show = false;

    var loc = $location.path();

    if (loc === '/Home/Index' || loc ==='')
    {
        $rootScope.show = true;
    }
   }

类别控制器代码:这是我重置$ rootScope变量值的地方

function getAllCategoryDetails($routeParams,$rootScope) {
    $rootScope.show = false;
}

<body ng-app>
<datalist id="dataList">
  <select id="select">  
    <option ng-repeat="val in temp" ng-hide="true"  >{{val}}</option>
  </select>
</datalist>                            
<input  list="dataList"   ng-model="fromLocation"  />
</body>

http://jsfiddle.net/awnqm/284/ 这是小提琴,我有一个简单的数据主义者和一个输入(使用该数据主义者).为什么ng-hide in options标签不起作用.

据我所知,这可能更像是一个AngularJS问题,而不是一个特定的Ionic问题.我的一个观点中有一个按钮:

<button class="button button-clear button-block button-positive" ui-sref="register">
    Register
 </button>

在我的控制器中,我有这个变量,我从本地存储得到的是真或假,必须隐藏,具体取决于值:

app.controller('loginController', ['$scope', '$localstorage',
  function($scope, $localstorage) {

  // Check if the user has already requested a register, and if true, hide
  // the 'Register' button
  if ($localstorage.get("registrationRequested", false) === true) {
    // How do I do this?
  }

}]);

现在第一个问题可能是,从控制器那里操纵dom是一种最佳实践吗？如果没有,我在哪里以及如何做到这一点？如果它在我的控制器中做得很好,那我该如何引用该按钮并隐藏它？

我的代码如下：

<div class="gridStyle" ng-grid="gridOptions" ng-show="flag"></div>

当我将标志设置为true时，网格将无法正确呈现，如果在键盘上按F12键，则网格可以正确显示！