angularJs 를 어떻게 사용 합 니까?

26949 단어 angularjs쓰다
이번 업데이트 에서 블 로 거들 은 AngularJS 가 자주 사용 하 는 속성 과 방법 을 공유 할 것 입 니 다.AngularJS 는 Google 직원 Mi 입 니 다.š코 헤 베 리 는 2009 년 부터 개발 에 착수 했다.이것 은 매우 좋 은 구상 이다.이 프로젝트 는 현재 구 글 이 정식으로 지원 하고 있 으 며,전 직 개발 팀 이 이 라 이브 러 리 를 계속 개발 하고 유지 하고 있다.AngularJS 는 JavaScript 프레임 워 크 입 니 다.자 바스 크 립 트 로 작 성 된 라 이브 러 리 입 니 다.따라서 일정한 자 바스 크 립 트 기반 이 있 는 친 구 는 쉽게 이해 할 수 있 고 그 중의 일부 용법 도 자 바스 크 립 트 의 사용 방법 을 참조 할 수 있다.
1.AngularJS 입문 명령 과 표현 식
AngularJS 는 명령 을 통 해 HTML 을 확장 하고 표현 식 으로 데 이 터 를 HTML 로 연결 합 니 다.
[AngularJS 상용 명령 어]
1.ng-app:Angular 가 관할 하 는 구역 을 설명 합 니 다.일반적으로 body 나 html 에 쓰 이 며,원칙적으로 한 페이지 만 있 습 니 다.<body ng-app=""></body>2.ng-model:요소 값(예 를 들 어 입력 필드 의 값)을 응용 프로그램의 변수 에 연결 합 니 다.<input type="text" ng-model="name"/>3.ng-bind:응용 프로그램 변수의 데 이 터 를 HTML 보기에 연결 합 니 다.표현 식{{}}으로 대체 할 수 있 습 니 다.

<div ng-bind="name"></div>
<div>{{name}}</div>
4.ng-init:AngularJS 프로그램의 변 수 를 초기 화 합 니 다.<body ng-app="" ng-init="name=123">5.표현 식:{{}바 인 딩 표현 식 은 문자,연산 자,변 수 를 포함 할 수 있 습 니 다.그러나 표현 식 은 웹 페이지 에 불 러 오 는 순간{{}을 볼 수 있 기 때문에ng-bind=""으로 대체 할 수 있 습 니 다.{{ 5 +""+ 5 + ',Angular'}}[기본 개념]
1.명령:AngularJS 에서 HTML 의 속성 을 확장 하여 기능 을 제공 합 니 다.그래서 ng-시작 하 는 새로운 속성 은 우리 에 게 명령 이 되 었 다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>AngularJS  </title>
 </head>
<body ng-app="" ng-init="name=123">

  <input type="text" id="input" ng-model="name"/>
  <div id="div" ng-bind="name+',Angular'">{{name}}</div>

  <input type="text" id="input2" ng-model="name"/>

  <p>        ： {{ 5 +""+ 5 + ',Angular'}}</p>

 </body>

 <script src="libs/jquery-3.1.1.js"></script>
 <script src="libs/angular.js"></script>

 <script type="text/javascript">
//  var input1 = document.getElementById("input");
//  var div = document.getElementById("div");
//  
//  input1.onkeyup = function(){
//   div.innerHTML = input1.value;
//  }

//  $("#input").keyup(function(){
//   $("#div").html($("input").val());
//  });
 </script>
</html>
2.AngularJS 의 MVC 와 역할 영역
[MVC 3 층 구조]
1.Model(모델):응용 프로그램 에서 데 이 터 를 처리 하 는 부분 입 니 다.(데이터베이스,변수 등에 데 이 터 를 저장 하거나 수정 합 니 다.AngularJS 의 Model 은 데이터
View(보기):사용자 가 본 데 이 터 를 표시 하 는 페이지;
컨트롤 러(컨트롤 러):응용 프로그램 에서 사용자 의 상호작용 을 처리 하 는 부분 입 니 다.보기 에서 데 이 터 를 읽 고 사용자 의 입력 을 제어 하 며 모델 에 데 이 터 를 보 냅 니 다.
2.작업 원리:사용자 가 그림 에서 요청 을 하고 contrller 가 요청 을 받 은 후에 해당 하 는 model 처리 에 전달 하 며 model 처리 가 끝 난 후에 결 과 를 contrller 에 게 되 돌려 주 고 view 층 에서 사용자 에 게 피드백 합 니 다.
주로 CRUD 류 응용 에 사용 되 며 게임 개발 과 DOM 조작 에 적합 하지 않 습 니 다.
Angular 모듈,즉 ng-app 가 연 결 된 부분 을 만 들 려 면 두 개의 인 자 를 전달 해 야 합 니 다.
① 모듈 이름,즉 ng-app 에 필요 한 바 인 딩 이름.ng-app="myApp"
② 배열:주입 해 야 할 모듈 이름 입 니 다.비어 있 을 필요 가 없습니다.var app = angular.module("myApp",[]);Angular 모듈 에 컨트롤 러 컨트롤 러 를 만 들 려 면 두 개의 인 자 를 전달 해 야 합 니 다.
① Controller 이름,즉 ng-controller 가 연결 해 야 할 이름 입 니 다.ng-controller="myCtrl"
② Controller 의 구조 함수:구조 함 수 는 여러 개의 매개 변 수 를 전달 할 수 있 습 니 다.$scope/$rootScope 와 각종 시스템 내 장 된 대상 을 포함 합 니 다.
[AngularJS 의 역할 영역]
①$scope:부분 작용 도 메 인 은$scope 의 속성 과 방법 을 설명 하고 현재 Controller 에서 만 사용 할 수 있 습 니 다.
②$rootScope:루트 역할 영역,$rootScope 에 있 는 속성 과 방법 을 설명 합 니 다.ng-app 에 포 함 된 모든 영역 에서 사용 할 수 있 습 니 다(같은 Controller 든,Controller 에 포 함 된 범위 든).
>>>$scope 성명 변 수 를 사용 하지 않 고 html 에서 ng-model 로 연 결 된 변수 역할 영역 을 직접 사용 하면:
1.ng-model 이 어떤 ng-controller 에 있다 면 이 변 수 는 현재 Controller 의$scope 에 기본적으로 연 결 됩 니 다.
2.ng-model 이 ng-controller 시계 에 없 으 면 이 변 수 는$rootScope 에 연 결 됩 니 다.

app.controller("myCtrl",function($scope,$rootScope){
//$scope.name = "name1";
$rootScope.age = 14;
$scope.classes = {
name:"H51701",
num:"33"
};
});
app.controller("myCtrl1",function(){
});
3.각도 필터
AngularJS 에서 필 터 는 파이프 문자(|)를 사용 하여 표현 식 과 명령 에 추가 할 수 있 습 니 다.
>>>시스템 내 장 된 필터:
currency 화폐 형식 으로 숫자 를 포맷 하 다.
filter 배열 항목 에서 하위 집합 을 선택 하 십시오.
lowercase 문자열 을 소문 자로 포맷 합 니 다.
orderBy 표현 식 에 따라 배열 합 니 다.
uppercase 문자열 을 대문자 로 포맷 합 니 다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
 </head>

 <body ng-app="app" ng-controller="ctrl">

  <p>{{"aBcDeF"|uppercase}}</p>
  <p>{{"aBcDeF"|lowercase}}</p>
  <p>{{123456|currency}}</p>
  <form class="form-horizontal">

  </form>
  <div class="form-group">
   <label>       ：</label>
   <input type="text" ng-model="search" />
  </div>

  <table class="table table-bordered">
   <thead>
    <tr>
     <th>  </th>
     <th>  </th>
     <th>  </th>
    </tr>
   </thead>
   <tr ng-repeat="item in classes| filter:search | orderBy:'score'">
    <td>{{item.name}}</td>
    <td>{{item.age}}</td>
    <td>{{item.score}}</td>
   </tr>
  </table>

  <p>{{"123456"|reverse}}</p>

 </body>
 <script src="libs/angular.js"></script>
 <script>

  angular.module("app",[])
  .controller("ctrl",function($scope){
   $scope.classes = [
    {name:"  ",age:"12",score:"88"},
    {name:"  ",age:"12",score:"88"},
    {name:"  ",age:"15",score:"78"},
    {name:"  ",age:"15",score:"78"},
    {name:"    ",age:"18",score:"98"},
    {name:"    ",age:"18",score:"98"}
   ];

  })
  /*
   *       
   */
  .filter('reverse', function() {

   return function(text) {
    if(!angular.isString(text)){
     return "           ";
    }else{
     return text.split("").reverse().join("");
    }

   }
  })
 </script>
</html>
4.앵 귤 러 서비스 서비스
[서비스 서비스]
1.내 장 된 서비스:
>>>내 장 된 서 비 스 를 사용 하려 면 controller 에서 함수 의 매개 변 수 를 통 해 주입 해 야 합 니 다!!!!
$location:현재 페이지 의 URL 주 소 를 되 돌려 줍 니 다.
$http:서버 요청 데이터,AJax 와 유사;
$timeout:JS window.setTimeout 함수 에 대응 합 니 다.
$interval:JS window.setInterval 함수 에 대응 합 니 다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body ng-app="app" ng-controller="ctrl">
  <pre >{{local}}</pre>
  <p ng-bind="myHeader"></p>
  <p ng-bind="num"></p>
  <p >{{gongneng}}</p>
  <p> 255  16  ：{{hexafy}}</p>
  <p>{{123|filt}}</p>

  <p>{{123|filt1}}</p>

 </body>
 <script type="text/javascript" src="libs/angular.js" ></script>
 <script type="text/javascript">

  angular.module("app",[])
  .controller("ctrl",function ($scope,$location,$timeout,$interval,$hexafy) {
   $scope.local=$location.absUrl();
    $scope.myHeader = "Hello World!";
   $timeout(function () {
    $scope.myHeader = "How are you today?";
   }, 2000);
   $scope.num=0;
   $interval(function () {
    $scope.num++;
   },1000);

   $scope.gongneng=$hexafy.$$gongneng;
   $scope.hexafy=$hexafy.myFunc(255);
  })
  /*     */
  .service('$hexafy', function() {
   this.$$gongneng = "      ，  16  ";
   this.myFunc = function (x) {
    return x.toString(16);
   }
  })
  .filter("filt",function(){
   return function(x){
    return x.toString(16);
   }
  })
  /*     ，       */
  .filter("filt1",function($hexafy){
   return function(x){
    return $hexafy.myFunc(x);
   }
  })
 </script>
</html>
[사용자 정의 서비스 팩 토리]
factory 는 값 을 되 돌려 주 는 함수 입 니 다.보통 factory 함 수 를 사용 하여 값 을 계산 하거나 되 돌려 줍 니 다.(factory 사용 상 service 와 차이 가 크 지 않다)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="libs/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 </head>

 <body ng-app="app" ng-controller="ctrl">
  <p>
   [  ]<br/>
   {{gongneng}}
  </p>
  <p>
   255  16   ：{{num}}
  </p>
 </body>
 <script src="libs/angular.js"></script>
 <script>

  angular.module("app",[])
  .config()
  .controller("ctrl",function($scope,hexafy){
   $scope.gongneng = hexafy.gongneng;
   $scope.num = hexafy.myFunc(255);
  })
  .factory('hexafy',function(){
   var obj = {
    gongneng : "      ，  16  ",
    myFunc:function(x){
     return x.toString(16);
    }
   };
   return obj;
  })
 </script>
</html>
[사용자 정의 서비스 provide]
1.AngularJS 에서 Service,factory 는 모두 provider 를 바탕 으로 이 루어 집 니 다.
2.provider 에서$get()방법 을 통 해 factory 의 쓰기 방법 을 제공 하여 value/service/factory 를 되 돌려 줍 니 다.
3.provider 는 세 가지 사용자 정의 서비스 중에서 config 설정 단계 에 쓸 수 있 는 유일한 것 입 니 다.
서비스 가 설정 단계 에서 실행 되 어야 한다 면 provider 를 사용 해 야 합 니 다.그렇지 않 으 면 보통 Service 나 factory 를 사용 합 니 다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="libs/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 </head>

 <body ng-app="app" ng-controller="ctrl">
  <p>
   [  ]<br/>
   {{gongneng}}
  </p>
  <p>
   255  16   ：{{num}}
  </p>
 </body>
 <script src="libs/angular.js"></script>
 <script>

  angular.module("app",[])
  /*       procide  ！*/

  .controller("ctrl",function($scope,hexafy){
   $scope.gongneng = hexafy.gongneng;
   $scope.num = hexafy.myFunc(255);
  })

  /*    provider  */
  .provider('hexafy',function(){
//   this.gongneng = "      ，  16  ";
   this.$get = function(){
    var obj = {
     gongneng : "      ，  16  ",
     myFunc : function(x){
      return x.toString(16);
     }
    }
    return obj;
   }
  })
 </script>
</html>
5.Angular 의$http
$http 는 원 격 서버 의 데 이 터 를 읽 는 데 사용 되 는 AngularJS 의 핵심 서비스 입 니 다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="libs/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 </head>

 <body ng-app="app" ng-controller="ctrl">
  <!--<pre>
   {{data}}
  </pre>-->
  <div class="container" style="margin-top: 50px;">
  <div class="panel panel-primary" >
   <div class="panel-heading">
    <div class="panel-title" style="text-align: center;">H5-1701     </div>
   </div>
   <div class="panel-body">
    <table class="table table-bordered">
     <thead>
      <tr>
       <th>  </th>
       <th>  </th>
       <th>  </th>
       <th>    </th>
       <th>    </th>
       <th>  </th>
      </tr>
     </thead>
     <tr ng-repeat="item in data | orderBy:'score.chinese + score.math'">
      <td ng-bind="item.name"></td>
      <td ng-bind="item.age"></td>
      <td ng-bind="item.hobby">
      <!--<span ng-repeat="a in item.hobby">{{a}}</span>-->
      </td>
      <td ng-bind="item.score.chinese"></td>
      <td ng-bind="item.score.math"></td>
      <td ng-bind="item.score.chinese + item.score.math"></td>
     </tr>
    </table>
   </div>
  </div>
  </div>

 </body>
 <script src="libs/angular.js"></script>
 <script>

  angular.module("app",[])
  .controller("ctrl",function($scope,$http){

   $http.post('h51701.json',{/*       */})
   .then(function(res){
    $scope.data = res.data;//data        ，       。 JSON  (  )
   });

  })
 </script>
</html>
6.Angular 의 select
데이터 원본 으로 배열 을 사용 합 니 다.
그 중에서 x 는 배열 의 모든 항목 을 나타 낸다.
기본적으로 x 를 option 의 value 에 직접 연결 합 니 다.
option 에 표 시 된 내용 은 앞의 x for...결정 이 있 습 니 다.

<select ng-model="name" ng-options="x.site for x in sites">
  </select>
대상 을 데이터 원본 으로 사용 합 니 다.
그 중에서(x,y)는 키 값 이 맞 고 x 는 키 이 며 y 는 값 임 을 나타 낸다.
기본 값 y 를 option 의 value 에 연결 합 니 다.
option 에 표 시 된 내용 은 앞의 x for...결정 이 있 습 니 다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="libs/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
  <style type="text/css">
   *{
    margin: 10px;
   }
  </style>
 </head>

 <body ng-app="app" ng-controller="ctrl">

  <select ng-model="name" ng-options="x for (x, y) in sites">
  </select>

  <div class="alert alert-info" style="width: 300px;">
        ：{{name}}
  </div>

  <table class="table table-bordered">
   <tr>
    <th>  </th>
    <th>  </th>
   </tr>
   <tr ng-repeat="item in options">
    <td>{{$index +1}}</td><!--$index        ， 0  -->
    <td>{{item}}</td>
   </tr>
  </table>

 </body>
 <script src="libs/angular.js"></script>
 <script>

  angular.module("app",[])
  .controller("ctrl",function($scope){
   $scope.options = ["  ","  ","    ","   "];

   $scope.sites = {
    site01 : "Google",
    site02 : "Runoob",
    site03 : "Taobao"
   };

  })
 </script>
</html>
7.Angular 의 DOM 과 사건
ng-disabled="true/false"가 true 에 들 어 갈 때 컨트롤 을 사용 하지 않 습 니 다.false 에 들 어 오 는 것 은,사용 하기;
ng-show 기본 숨 김 true 에 들 어 갈 때 표시 하기;
ng-hide 기본 디 스 플레이 가 true 로 들 어 오 는 것 은 숨 김 입 니 다.
ng-click 은 AngularJS 의 클릭 이 벤트 를 정의 합 니 다.
Angular 역할 영역 에 연 결 된 속성 과 방법 만 촉발 할 수 있 습 니 다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="libs/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
  <style type="text/css">
   *{
    margin: 10px;
   }
  </style>
 </head>

 <body ng-app="app" ng-controller="ctrl">

   <input type="checkbox" ng-model="mySwitch">        ！
  </label>

  <button ng-disabled="!mySwitch" class="btn btn-primary">  !</button>
  <p></p>

  <label>
   <input type="checkbox" ng-model="mySwitch1">    ？
  </label>

  <button ng-show="mySwitch1" class="btn btn-primary">  !</button>
  <p></p>

  <label>
   <input type="checkbox" ng-model="mySwitch2">    ？
  </label>

  <button ng-hide="mySwitch2" class="btn btn-primary">  !</button>
  <p></p>

  <button ng-click="count = count + 1">  ！</button>
  <p>{{ count }}</p>
  <button ng-click="func()">      ！</button>

 </body>
 <script src="libs/angular.js"></script>
 <script>

  angular.module("app",[])
  .controller("ctrl",function($scope,$rootScope){
   $scope.count = 10;
   $scope.func = function(){
    alert("      ！");
   }
  })
 </script>
</html>
8.Angular 폼 과 입력 검증
[AngularJS 의 폼 검증]
1.폼 에서 자주 사용 하 는 검증 작업:
$dirty 양식 에 기입 기록 이 있다
$valid 필드 내용 합 법 적
$invalid 필드 내용 은 불법 입 니 다.
$pristine 폼 에 기록 을 작성 하지 않 았 습 니 다.
$error 폼 인증 이 통과 되 지 않 은 오류 정보
2.검증 할 때 폼 과 검증 할 input 를 주 고 name 속성 을 설정 합 니 다.
form 및 input 에 name 을 설정 하면 form 폼 정 보 를$scope 역할 영역 에 기본 으로 연결 합 니 다.따라서 formName.inputName.$인증 작업 을 사용 하여 검증 결 과 를 얻 을 수 있 습 니 다.
예 를 들 어 formName.inputName.$dirty="true"폼 이 작성 되 었 습 니 다.
formName.inputName.$invalid="true"폼 입력 이 비합법적 입 니 다
formName.inputName.$error.required="true"폼 은 작성 해 야 하지만 작성 하지 않 았 습 니 다.
$error 가 지원 하 는 인증 은 required/minlength/max length/pattern/email/number/date/url 등 이 있 습 니 다.
3.type="email"과 같은 충돌 을 피하 기 위해 H5 도 검증 작업 을 합 니 다.AngularJS 인증 만 사용 하려 면
속성 을 사용 하여 H5 자체 인증 기능 을 사용 하지 않 을 수 있 습 니 다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="libs/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
  <style type="text/css">
   .row{
    margin-bottom: 10px;
   }
   .row .col-xs-5{
    text-align: center;
   }
   .suc{
    border-color: #3c763d;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   }
   .suc:focus{
    border-color: #2b542c;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
   }

   .err{
    border-color: #a94442;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   }
   .err:focus{
    border-color: #843534;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
   }
  </style>
 </head>
 <body ng-app="app" ng-controller="ctrl">
 <div class="container" style="width: 40%; margin: 50px auto; padding: 0px;">
  <div class="panel panel-primary">
   <div class="panel-heading">
    <div class="panel-title" style="text-align: center;">
         
    </div>
   </div>

   <div class="panel-body">
    <form action="" method="get" class="form-horizontal" name="myForm" novalidate>
    <div class="row" >
     <div class="col-xs-3">
         ：
     </div>
     <div class="col-xs-9">
      <input type="text" class="form-control" ng-model="user.name" name="name" ng-minlength="4" ng-maxlength="10" required ng-class="{suc:myForm.name.$valid && myForm.name.$dirty,err:myForm.name.$invalid && myForm.name.$dirty}"/>
      <p style="color: red; margin: 0px;" ng-show="myForm.name.$invalid && myForm.name.$dirty">
       <!--           ，p  -->
       <span ng-show="myForm.name.$error.required">       ！！！</span>
       <span ng-show="myForm.name.$error.minlength">       4   ！！！</span>
       <span ng-show="myForm.name.$error.maxlength">       10   ！！！</span>
      </p>
     </div>
    </div>

    <div class="row">
     <div class="col-xs-3">
        ：
     </div>
     <div class="col-xs-9">
      <input type="email" class="form-control" ng-model="user.mail" name="mail" required ng-class="{suc:myForm.mail.$valid && myForm.mail.$dirty,err:myForm.mail.$invalid && myForm.mail.$dirty}"/>
      <p style="color: red; margin: 0px;" ng-show="myForm.mail.$invalid && myForm.mail.$dirty">
       <!--           ，p  -->
       <span ng-show="myForm.mail.$error.required">      ！！！</span>
       <span ng-show="myForm.mail.$error.email">       ！！！</span>
      </p>
     </div>
    </div>

    <div class="row">
     <div class="col-xs-3">
        ：
     </div>
     <div class="col-xs-9">
      <input type="password" class="form-control" ng-model="user.pwd" name="pwd" pattern="^\w{6,18}$" required ng-class="{suc:myForm.pwd.$valid && myForm.pwd.$dirty,err:myForm.pwd.$invalid && myForm.pwd.$dirty}"/>
      <p style="color: red; margin: 0px;" ng-show="myForm.pwd.$invalid && myForm.pwd.$dirty">
       <!--           ，p  -->
       <span ng-show="myForm.pwd.$error.pattern">    6-18 ，      、  、   </span>
      </p>
     </div>

    </div>

    <div class="row">
     <div class="col-xs-3">
          ：
     </div>
     <div class="col-xs-9">
      <input type="password" class="form-control" ng-model="rePwd" name="rePwd" required ng-class="{suc:myForm.rePwd.$dirty&&rePwd==user.pwd,err:myForm.rePwd.$dirty&&rePwd!=user.pwd}"/>
      <p style="color: red; margin: 0px;" ng-show="myForm.rePwd.$dirty && rePwd!=user.pwd">
       <!--           ，p  -->
                ！！！
      </p>
     </div>
    </div>

    <div class="row">
     <div class="col-xs-5">
      <input type="submit" value="  " class="btn btn-success" ng-disabled="myForm.$invalid || rePwd!=user.pwd" />
     </div>
     <div class="col-xs-5">
      <input type="button" value="  " class="btn btn-warning" ng-click="resets()" />
     </div>
    </div>
    </form>
   </div>
  </div>
  <pre>
   {{user.pwd}}
  </pre>
 </div>

 </body>
 <script src="libs/angular.js"></script>
 <script>

   $scope.resets = function(){
    $scope.user = angular.copy($scope.initUser);
   }
   $scope.resets();
  })
 </script>
</html>
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!
C\#Winform 키보드 차단 win 과 alt+F4 구현 코드
C\#인 코딩 좋 은 습관,모든 사랑 c\#동지 에 게 바 칩 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage