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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
js子页面获取父页面数据示例
May 15 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
js+css实现导航效果实例
Feb 10 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP输出日历表代码实例
2015/03/27 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
es6中reduce的基本使用方法
2019/09/10 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中type的构造函数参数含义说明
2015/06/21 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python正则捕获操作示例
2017/08/19 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
python制作简单五子棋游戏
2019/06/18 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
我的中国梦演讲稿600字
2014/08/19 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
nginx配置指令之server_name的具体使用
2022/08/14 Servers