AngularJS 양방향 데이터 바인딩 자세한 간단한 예-JS 튜토리얼-php.cn

AngularJS 양방향 데이터 바인딩 자세한 간단한 예

高洛峰

풀어 주다： 2016-12-24 10:30:18

원래의

1148명이 탐색했습니다.

Angular의 양방향 데이터 바인딩은 데이터 모델이 모델을 통해 설정되면 뷰의 데이터가 그에 따라 각도 프로그램에 저장된다는 것이 개인적인 이해입니다. 뷰의 데이터 변경 사항이 동기화됩니다. 모델에 적용되며, 모델의 데이터 변경 사항도 보기에 동기화됩니다.

아래 데모:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>hello, AngularJS!</title>
  <script src="angular.js"></script>
</head>
<body>
  <div ng-app>
    <!-- ng-model指令将表单的value绑定到model的username变量-->
    <input ng-model="username" type="text" placeholder="请输入...">
    <p>Hello, <strong>{{username}}</strong>!</p>
  </div>
</body>
</html>

로그인 후 복사

실행 결과: 프로그램이 실행된 후 입력창에 텍스트를 입력하면 입력창의 내용과 동기되어 다음과 같이 변경됩니다. 놀랍지 않나요! 큰 js 코드 작성(onchange 이벤트를 수신하고 아래의 Strong 요소에 입력 값 할당)을 작성해야 했던 작업을 이제 단 하나의 ng-model 지시문으로 완료할 수 있습니다. 완벽해요!

AngularJS 双向数据绑定