Angular实现点击按钮控制隐藏和显示功能示例

本文实例讲述了Angular实现点击按钮控制隐藏和显示功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net Angular显示隐藏</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
  <script src="angular.min.js"></script>
    <script>
      var myapp=angular.module("myapp",[]);
      myapp.controller("myCtrl",function ($scope) {
        $scope.show=true;
        $scope.fun=function () {
          $scope.show=!$scope.show;
          console.log($scope.show);
        }
        $scope.hide=true;
        $scope.func=function () {
          $scope.hide=!$scope.hide;
        }
      })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="box"ng-show="show"></div>
<button ng-click="fun()">点击切换</button>
<div ng-class="{box:hide}"></div>
<button ng-click="func()">按钮</button>
</body>
</html>

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

赞 (0)

相关推荐

  • AngularJS前端页面操作之用户修改密码功能示例

    本文实例讲述了AngularJS前端页面操作之用户修改密码功能.分享给大家供大家参考,具体如下: 最近在做前端设计,主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求.处理等工作.在设计页面比如忘记密码时,发现一个有效的设计思路是很重要的. 就以修改密码为例,要将提示信息友好的展示给用户,明确告诉用户在操作的过程中那部分有问题,这需要定义详细的变量以及能在页面的不同位置显示信息.下面的代码是自己写的一个简单例子,记录学习进程. changePwd var app = ang

  • Angular实现点击按钮后在上方显示输入内容的方法

    Angular实现点击按钮后在上方显示输入内容的方法

    本文实例讲述了Angular实现点击按钮后在上方显示输入内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示输入内容</title> <script src="angu

  • 在 Angular2 中实现自定义校验指令（确认密码）的方法

    在 Angular2 中实现自定义校验指令（确认密码）的方法

    我们会在本文中探索 Angular 2 内建的自定义验证. # 介绍 Angular 2 原生就支持一些有用的验证器: required: 验证字段必须存在 minlength: 验证字段值的最小长度有效 maxlength: 验证字段值的最大长度有效 pattern: 验证输入的值是否匹配给定的模板,比如 email 我们会基于下面的接口创建一个表单来获取用户信息. // user.interface.ts export interface User { username: string; /

  • AngularJS实现根据不同条件显示不同控件

    AngularJS实现根据不同条件显示不同控件

    由于项目需求,需要实现根据不同条件显示不同控件的功能.具体要求如下图所示: 即当选择"每单固定减"时,下方只显示"减免金额"一栏: 当选择"每单固定折扣"时,下方只显示"折扣比例"一栏: 当选择"每单满额减"时,下方只显示"满..减.."两栏. 根据自己对angular的了解,应该可以很轻松的实现此功能. js设置控件的隐藏与显示,设置控件style的display和visibility

  • AngularJS实时获取并显示密码的方法

    本文实例讲述了AngularJS实时获取并显示密码的方法.分享给大家供大家参考,具体如下: 1.设计源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net - AngularJS获取密码</title> <script type="text/javascript" src="angul

  • angular仿支付宝密码框输入效果

    angular仿支付宝密码框输入效果

    项目需求,使用ng写一个密码框格子支付模块,一开始使用一个input+letter-spacing来分割字符,但是发现间距非常不好控制,随着字符的输入文本框字符串间距还会自动调整.最终从网上查找到一款jq仿支付宝密码输入框,于是我模仿编写了个指令模块. 效果如下: 完整代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <met

  • angularjs2 ng2 密码隐藏显示的实例代码

    angularjs2 ng2 密码隐藏显示的实例代码

    angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目,注册页的密码的input一般用password,但是用户输入密码时可能会输入错误,需要显示成text. 如图: 首先,输入框的类型判断: <ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input> 然后,添加眼睛的点击事件,ngClass判断图标样式: <a hr

  • Angularjs修改密码的实例代码

    修改密码逻辑思维 首先要输入旧的密码,判断旧的密码是否正确(后台判断) 其次输入新的密码,判断新密码格式(可增加) 最后判断新密码和确认密码输入是否一致 html部分 <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label"><i c

  • AngularJs验证重复密码的方法(两种)

    本文给大家分享angularjs验证重复密码的两种方法.具体方法详情如下所示: 第一种: <label for="password">密码</label> <input id="password" name="password" type="password" ng-model="user.password" required> <label for="r

  • angularjs 表单密码验证自定义指令实现代码

    html代码 <form name="form"> <input type="password" name="password" ng-model="password" required placeholder="请输入密码"> <input type="password" name="passwordConfirm" ng-model=

随机推荐