Angular实现点击按钮后在上方显示输入内容的方法-创新互联

本文实例讲述了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>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

上一篇：Linux系统用户管理命令小结-创新互联

下一篇：MySQL测试工具sysbench-创新互联