Angular에서 입력 내용을 표시하는 방법-JS 튜토리얼-php.cn

Angular에서 입력 내용을 표시하는 방법

亚连

풀어 주다： 2018-06-15 11:18:25

원래의

1531명이 탐색했습니다.

이 글에서는 버튼을 클릭한 후 위에 입력 내용을 표시하는 Angular의 방법을 주로 소개하며, AngularJS 이벤트 응답과 페이지 요소 속성 관련 동작 기술의 동적 설정이 필요한 친구들이 참고할 수 있습니다.

이 글은 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">
<p>
  <ul>
    <li>{{getUser.name}}</li>
    <li>{{getUser.sex}}</li>
    <li>{{getUser.email}}</li>
  </ul>
</p>
<p>
  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>
</p>
</body>
</html>

로그인 후 복사

위는 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.