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


Posted in Javascript onDecember 27, 2017

本文实例讲述了Angular实现点击按钮后在上方显示输入内容的方法。分享给大家供大家参考,具体如下:

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 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程序设计有所帮助。

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 #Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 #Javascript
简单的Vue异步组件实例Demo
Dec 27 #Javascript
Vue.js组件间的循环引用方法示例
Dec 27 #Javascript
全面介绍vue 全家桶和项目实例
Dec 27 #Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
You might like
PHP生成便于打印的网页
2006/10/09 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
python实现简单的socket server实例
2015/04/29 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python实现名片管理系统项目
2019/04/26 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
优秀员工获奖感言
2014/03/01 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
公证委托书标准格式
2014/09/11 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android