脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS DOM元素的显示与隐藏

AngularJS实现DOM元素的显示与隐藏功能

 更新时间：2016年11月22日 09:44:22   作者：栁罗风尘  
这篇文章主要介绍了AngularJS实现DOM元素的显示与隐藏功能,涉及AngularJS中ng-hide与ng-show两个属性的使用,需要的朋友可以参考下

本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能。分享给大家供大家参考，具体如下：

DOM元素的显示与隐藏 ，是前端开发中常常会用到的功能，AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean。

【HTML代码】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>angularjs 显示隐藏元素</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body ng-app="showHide">
 <div ng-controller="showElements">
  <div ng-show="butshow">我出现了</div>
  <button ng-click="toggle();">显示/隐藏</button>
 </div>
</body>
<script src="./js/angular.min.js"></script>
<script>
 angular.module("showHide",[]).controller('showElements', ['$scope', function($scope){
   $scope.butshow = true;
   $scope.toggle= function(){
   $scope.butshow = !($scope.butshow);
   }
 }])
</script>
</html>

PS：这里有个问题：就是当我直接设置 $scope.but.show 变量的时候 出现了一大堆错误，难道不允许这样设置变量？

有知道的大神欢迎补充一下，谢谢！

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》、《jQuery常用插件及用法总结》、《JavaScript操作DOM技巧总结》及《jQuery操作DOM节点方法总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Angular 与 Component store实践示例

    Angular 与 Component store实践示例

    这篇文章主要为大家介绍了Angular 与 Component store实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • 浅谈Angular HttpClient简单入门

    浅谈Angular HttpClient简单入门

    本篇文章主要介绍了浅谈Angular HttpClient 简单入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Angular中ng-bind和ng-model的区别实例详解

    Angular中ng-bind和ng-model的区别实例详解

    这篇文章主要介绍了Angular中ng-bind和ng-model的区别实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • AngularJS内置指令

    AngularJS内置指令

    这篇文章主要详细介绍了AngularJS内置指令的使用方法，非常详细，常用的一些指令操作都做了总结，有需要的小伙伴参考下
    2015-02-02
  • 基于Angularjs+mybatis实现二级评论系统(仿简书)

    基于Angularjs+mybatis实现二级评论系统(仿简书)

    这篇文章主要为大家详细介绍了基于Angularjs+mybatis实现二级评论系统，模仿简书效果制作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

    AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

    这篇文章主要介绍了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法,结合实例形式分析AngularJS下拉滚动插件ngInfiniteScroll的下载、功能、属性及相关使用方法,需要的朋友可以参考下
    2016-12-12
  • angularjs自定义过滤器demo示例

    angularjs自定义过滤器demo示例

    这篇文章主要介绍了angularjs自定义过滤器,结合完整实例形式分析了angularjs自定义过滤器相关原理、使用方法及操作注意事项,需要的朋友可以参考下
    2019-08-08
  • 关于Angular2 + node接口调试的解决方案

    关于Angular2 + node接口调试的解决方案

    这篇文章主要给大家介绍了关于Angular2 + node接口调试的解决方案，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • angular2使用简单介绍

    angular2使用简单介绍

    Angular2开发者预览版出来已有一段时间，这个以速度与移动性能为目的的框架到底如何，今天我们来结合官网的demo尝试一下。
    2016-03-03
  • Angular实践之将Input与Lifecycle转换成流示例详解

    Angular实践之将Input与Lifecycle转换成流示例详解

    这篇文章主要为大家介绍了Angular实践之将Input与Lifecycle转换成流示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02

最新评论