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

最新推荐文章于 2020-12-29 00:46:05 发布

转载最新推荐文章于 2020-12-29 00:46:05 发布 · 1k 阅读

本文介绍了一个使用AngularJS实现的基本用户信息管理系统。该系统通过AngularJS模块化定义了一个可以设置和获取用户信息的服务，并在页面上实现了用户信息的展示与更新功能。用户能够通过输入框更改姓名、性别和邮箱等基本信息，并点击按钮保存这些更改。

<!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>