버튼 클릭 후 위의 입력 내용을 표시하는 Angular 구현의 자세한 예-PHP 튜토리얼-php.cn

버튼 클릭 후 위의 입력 내용을 표시하는 Angular 구현의 자세한 예

小云云

풀어 주다： 2023-03-18 16:56:01

원래의

1498명이 탐색했습니다.

이 글에서는 버튼을 클릭한 후 위의 입력 내용을 표시하는 Angular의 방법과 AngularJS 이벤트 응답 및 페이지 요소 속성 관련 운영 기술의 동적 설정을 주로 소개합니다. 모두에게 도움이 되기를 바랍니다.

먼저 실행 효과를 살펴보겠습니다.

구체 코드는 다음과 같습니다.

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

로그인 후 복사

내용 입력 해당 div의 세 가지 방법 예시에 표시됩니다

div는 자동 입력 스타일을 차단하기 위해 입력을 입력 상자로 사용하지 않고도 콘텐츠를 입력할 수 있습니다.

위 내용은 버튼 클릭 후 위의 입력 내용을 표시하는 Angular 구현의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!