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 相关文章推荐
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
Python实现替换文件中指定内容的方法
2018/03/19 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python实现海螺图片的方法示例
2019/05/12 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Python操作Jira库常用方法解析
2020/04/10 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
2014庆六一活动方案
2014/03/02 职场文书
关于环保的标语
2014/06/13 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
劳动仲裁调解书
2015/05/20 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python