练习ng-show和ng-hide的方法

Posted Insus.NET

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了练习ng-show和ng-hide的方法相关的知识,希望对你有一定的参考价值。

在程序设计过程,我们需要把某一元素或是或一块进行显示与隐藏。

如你正使用angularjs的话,就可以使用ng-show或者ng-hide来进行控制。

 

var showhideApp = angular.module(\'showhideApp\', []);
Source Code

 

定义控制器,其中编写2个铵钮的事件:

 

showhideApp.controller(\'showhideController\', function ($scope) {
    $scope.IsVisibled = false;

    $scope.ShowDivTag = function () {
        $scope.IsVisibled = true;
    }

    $scope.HideDivTag = function () {
        $scope.IsVisibled = false;
    }
});
Source Code


html代码:

 

<div ng-app="showhideApp" ng-controller="showhideController">
        <div>
            <input type="button" value="ShowDivTag" ng-click="ShowDivTag()" />
            <input type="button" value="HideDivTag" ng-click="HideDivTag()" />
        </div>
        <div>
            <div ng-show="IsVisibled">Insus.NET</div>
        </div>
    </div>
Source Code

 

预览:


 

以上是关于练习ng-show和ng-hide的方法的主要内容,如果未能解决你的问题,请参考以下文章

ngAnimate CSS 动画不适用于 ng-show 和 ng-hide

何时支持 ng-if 与 ng-show/ng-hide?

无法让 ng-hide 和 ng-show 使用令牌

ng-show和ng-hide的进阶应用

ng-hide / ng-show 中是不是可以使用复杂的表达式?

AngularJS - 可以 ng-show/ng-hide 模式窗口吗?