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

2024-12-16 13:05:34

本文实例讲述了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程序设计有所帮助。

使用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>
用AngularJS来实现监察表单按钮的禁用效果

这篇博文主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据绑定是如何工作的人. 这里主要是用到了$watch监察数据的变化,并用正则判断数据是否符合要求. 关键HTML代码: <div class="row row-form"> <div class="col col-form"> <div class="list"> <div class="row row-code"
AngularJS 实现点击按钮获取验证码功能实例代码

html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入, <div ng-controller="forGetPassword" ng-app="routingDemoApp"> <form novalidate name="forget"> <header class="bar bar-nav"> <a href="javascript:his
ionic+AngularJs实现获取验证码倒计时按钮

按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwin').directive('timerbutton', function($timeout, $interval){
Angular.js实现获取验证码倒计时60秒按钮的简单方法

前言本文主要介绍了关于Angular.js实现获取验证码倒计时60秒按钮的相关内容,关于这个功能相信不用多介绍,大家都不陌生,所以下面话不多说了,来一起看看实现的方法吧. 一.controller中代码 angular.module('controllers') .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) { $scope.timer = fa
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编写多选按钮选中时触发指定方法的指令代码详解

最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下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
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

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

相关推荐

随机推荐