Angular实现点击按钮后在上方显示输入内容的方法
本文实例讲述了Angular实现点击按钮后在上方显示输入内容的方法。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示输入内容</title> <script src="angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.provider("User",function(){ var user={ name:"zs", sex:"girl", email:"zs@bawei.com" }; var _getUser=function(){ return user; }; var _setUser=function(name,sex,email){ user.name=name; user.sex=sex; user.email=email; }; this.$get=function(){ return{ getUser:_getUser, setUser:_setUser } } }); myapp.controller("myCtrl",function($scope,User){ $scope.getUser=User.getUser(); $scope.setUser=function(){ User.setUser($scope.name,$scope.sex,$scope.email); } }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <div> <ul> <li>{{getUser.name}}</li> <li>{{getUser.sex}}</li> <li>{{getUser.email}}</li> </ul> </div> <div> name:<input type="text" ng-model="name"><br> sex:<input type="text" ng-model="sex"><br/> email:<input type="text" ng-model="email"><br/> <button ng-click="setUser()">按钮</button> </div> </body> </html>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
Angular.js实现获取验证码倒计时60秒按钮的简单方法
前言 本文主要介绍了关于Angular.js实现获取验证码倒计时60秒按钮的相关内容,关于这个功能相信不用多介绍,大家都不陌生,所以下面话不多说了,来一起看看实现的方法吧. 一.controller中代码 angular.module('controllers') .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) { $scope.timer = fa
-
用AngularJS来实现监察表单按钮的禁用效果
这篇博文主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据绑定是如何工作的人. 这里主要是用到了$watch监察数据的变化,并用正则判断数据是否符合要求. 关键HTML代码: <div class="row row-form"> <div class="col col-form"> <div class="list"> <div class="row row-code"
-
ionic+AngularJs实现获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwin').directive('timerbutton', function($timeout, $interval){
-
Angular2搜索和重置按钮过场动画
需求:给项目管理页面加上搜索和重置的过场动画. 最先想到的就是利用angular2的animations属性. // project.component.ts import {trigger, state, style, animate, transition} from '@angular/animations'; @Component({ selector: 'projects', template: require('./projects.html'), styleUrls: ['./pr
-
AngularJS 实现点击按钮获取验证码功能实例代码
html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入, <div ng-controller="forGetPassword" ng-app="routingDemoApp"> <form novalidate name="forget"> <header class="bar bar-nav"> <a href="javascript:his
-
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下AngularJS的提供的指令,但是没有发现相应的指令.而一个看起来很像的指令就是ng-checked,但是这个指令是用来代替标签里面checked属性的,所以也用不了.因此我就自己动手试着写一个这样的指令,相应的代码如下: <form name="test_form" ng-controller="TestCtrl"> <input type="checkbox&
-
AngularJS实现按钮提示与点击变色效果
本文用angularJS简单实现了一个小的按钮提示,按钮点击后会变色,注意html文件中需要引入jquery.js和angular.js 运行截图: 当点击按钮的时候 按钮的样式改变: css代码: <style type="text/css"> *{margin: 0px;padding: 0px;} .bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relativ
-
使用AngularJS2中的指令实现按钮的切换效果
之前在AngularJS2中一种button切换效果的实现(二)中实现了按钮的切换效果,但是方法比较low,这次我们使用Angular2的指令来实现. 指令实现hover效果 import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructo
-
用angular实现多选按钮的全选与反选实例代码
在页面中我们常常会遇到多选框,例如购物车里的商品 下面用angular来实现这一功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> </head>
-
Angular实现点击按钮后在上方显示输入内容的方法
本文实例讲述了Angular实现点击按钮后在上方显示输入内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示输入内容</title> <script src="angu
-
JS实现点击按钮后框架内载入不同网页的方法
本文实例讲述了JS实现点击按钮后框架内载入不同网页的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g
-
JavaScript点击按钮后弹出透明浮动层的方法
本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法.分享给大家供大家参考.具体分析如下: 这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScript代码,你可以借鉴一下. <HTML> <HEAD> <TITLE>浮动层居中的对话框效果演示</TITLE> <META http-equiv=Content-Type content="text/htm
-
利用JS实现点击按钮后图片自动切换的简单方法
我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html
-
js实现点击按钮后给Div图层设置随机背景颜色的方法
本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法.分享给大家供大家参考.具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <title>js设置随机颜色 <
-
点击按钮后 文本框变为Select下拉列表框
点击按钮后,文本框变为Select下拉列表框 function showSelect(){ var _t = document.getElementById('t'); var _s = document.getElementById('sel'); if( _t.style.display == ''){ _t.style.display = 'none'; } else{ _t.style.display = ''; } if ( _s.style.display == 'none' ){
-
Android中AlertDialog 点击按钮后不关闭对话框的功能
这里的问题:当我点击确定按钮,也就是 AlertDialog 里的 PositiveButton 的时候,我们需要判断用户是输入是否符合我们的预期,如果不符合通常提示用户重写输入,且不关闭当前的对话框,但上图中点击按钮后会自动的关闭窗口. 先看原来的这个是怎么写的: private void openDialog() { LinearLayout linearLayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.l
-
Bootstrap中点击按钮后变灰并显示加载中实例代码
Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示. 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮
-
Angular实现点击按钮控制隐藏和显示功能示例
本文实例讲述了Angular实现点击按钮控制隐藏和显示功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示隐藏</title> <style> .box{ width: 100p
-
微信小程序实现点击按钮后修改颜色
这篇文章主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需实现的功能: 点击按钮后,按钮的颜色会加深 效果展示: 原按钮 点击后的按钮 思路: 给按钮设置一个点击事件,点击了按钮后,修改按钮的样式. 代码: test.wxml文件 <view wx:if="{{sty==0}}"> <view class="score" style="backg
随机推荐
- Cocos2d-x学习入门之HelloWorld程序
- iOS10开发和Xcode 8新特性及常见问题解析
- Python原始字符串与Unicode字符串操作符用法实例分析
- 使图片旋转的3种解决方案
- javascript实现消灭星星小游戏简单版
- Node.js中require的工作原理浅析
- js showModalDialog参数的使用详解
- 微信小程序图片自适应支持多图实例详解
- JavaWeb应用实例:用servlet实现oracle 基本增删改查
- 查找iframe里元素的方法可传参
- js中对象的声明方式以及数组的一些用法示例
- JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
- 为Nginx服务器配置黑名单或白名单功能的防火墙
- AndroidStudio 使用过程中出现的异常(Gradle sync failed)处理办法
- spring mvc 使用kaptcha配置生成验证码实例
- ADO.NET通用数据库访问类
- C#分析URL参数并获取参数和值对应列表的方法
- Android加载对话框同时异步执行实现方法
- 根据IP地址查交换机端口
- Python建立Map写Excel表实例解析