> 웹 프론트엔드 > JS 튜토리얼 > Anglejs 연구 노트의 양방향 데이터 바인딩

Anglejs 연구 노트의 양방향 데이터 바인딩

高洛峰
풀어 주다: 2016-12-24 10:07:26
원래의
1521명이 탐색했습니다.

이번에는 Angle의 양방향 데이터 바인딩에 대해 자세히 설명하겠습니다.

1. 간단한 예

이미 첫 번째 섹션에서 이 예를 확인하려면 여기로 이동하세요.

여기에서 얻은 효과는 입력 상자에 Enter를 입력하는 것입니다. 내용 및 해당 내용이 그에 따라 변경됩니다. 이는 양방향 데이터 바인딩을 달성합니다.

2. 값 표현식 및 ng-bind 사용

기사에 나오는 첫 번째 예에서는 여기를 클릭하여 {{greeting.text}} 및 { {text}}는 값 표현인데 계속해서 페이지를 새로고침하다 보면 문제가 발견됩니다. 즉, 페이지가 가끔 나타나는 경우가 있습니다. "{{greeting.text}} {{text}}" "이 문자열은 어떻게 우리가 해결해야 해?

여기서는 ng-bind 명령이 사용됩니다. 데이터 표현식을 바인딩하는 데 사용됩니다.

예를 들어

1

<p>{{greeting.text}} {{text}}</p>

로그인 후 복사


1

"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";

로그인 후 복사

으로 변경할 수 있습니다.


이 수정 후에는 페이지를 새로 고칠 때 원치 않는 문자열이 나타나지 않습니다.

그러나 명령을 사용하는 것은 표현식을 직접 사용하는 것보다 항상 효율성이 떨어지므로 일반적인 규칙을 요약했습니다. 일반적으로 인덱스에는 ng-bind를 사용하고 후속 템플릿 형식에서는 '{{}}'를 사용합니다. .

3. 일반적인 양방향 바인딩 시나리오 - 양식

먼저 form.html의 내용을 살펴보겠습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<!doctype html>

<html ng-app="UserInfoModule">

  

<head>

 <meta charset="utf-8">

 <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">

 <script src="js/angular-1.3.0.js"></script>

 <script src="Form.js"></script>

</head>

  

<body>

 <p class="panel panel-primary">

  <p class="panel-heading">

   <p class="panel-title">双向数据绑定</p>

  </p>

  <p class="panel-body">

   <p class="row">

    <p class="col-md-12">

     <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">

      <p class="form-group">

       <label class="col-md-2 control-label">

        邮箱:

       </label>

       <p class="col-md-10">

        <input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email">

       </p>

      </p>

      <p class="form-group">

       <label class="col-md-2 control-label">

        密码:

       </label>

       <p class="col-md-10">

        <input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">

       </p>

      </p>

      <p class="form-group">

       <p class="col-md-offset-2 col-md-10">

        <p class="checkbox">

         <label>

          <input type="checkbox" ng-model="userInfo.autoLogin">自动登录

         </label>

        </p>

       </p>

      </p>

      <p class="form-group">

       <p class="col-md-offset-2 col-md-10">

        <button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>

        <button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>

        <button class="btn btn-default" ng-click="resetForm()">重置表单</button>

       </p>

      </p>

     </form>

    </p>

   </p>

  </p>

 </p>

</body>

  

</html>

로그인 후 복사


Form.js 내용을 보면

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

var userInfoModule = angular.module(&#39;UserInfoModule&#39;, []);

userInfoModule.controller(&#39;UserInfoCtrl&#39;, [&#39;$scope&#39;,

 function($scope) {

  $scope.userInfo = {

   email: "253445528@qq.com",

   password: "253445528",

   autoLogin: true

  };

  $scope.getFormData = function() {

   console.log($scope.userInfo);

  };

  $scope.setFormData = function() {

   $scope.userInfo = {

    email: &#39;testtest@126.com&#39;,

    password: &#39;testtest&#39;,

    autoLogin: false

   }

  };

  $scope.resetForm = function() {

   $scope.userInfo = {

    email: "253445528@qq.com",

    password: "253445528",

    autoLogin: true

   };

  }

 }

])

로그인 후 복사

위 그림에 구현된 함수는 다음과 같습니다.

1. "Get"을 클릭하여 3개를 출력합니다. 콘솔의 데이터, 이메일, 비밀번호 및 선택한 상태(true, false)

2. "설정"을 클릭합니다. 두 입력 상자의 값과 확인란의 선택 취소 상태를 변경할 수 있습니다.

3. "재설정"을 클릭하세요. 데이터를 원래 데이터로 복원할 수 있습니다.

입력 상자의 ng-model과 컨트롤러의 값은 양방향 바인딩을 구현하므로 입력 상자의 값을 변경하거나 컨트롤러의 값을 변경하면 양쪽의 값이 변경됩니다. 따라서. 단 몇 줄의 코드만으로 이렇게 강력한 기능을 구현할 수 있다는 것이 놀랍지 않나요? 정말 놀랍습니다. 하지만 더 놀라운 것은 아직 오지 않았습니다! 계속하세요!

4. 동적으로 라벨 스타일 전환

먼저 color.html의 내용을 살펴보세요.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!doctype html>

<html ng-app="MyCSSModule">

  

<head>

  <meta charset="utf-8">

  <link rel="stylesheet" href="CSS1.css">

</head>

<style type="text/css">

  .text-red {

    background-color: #ff0000;

  }

  .text-green {

    background-color: #00ff00;

  }

</style>

  

<body>

  <p ng-controller="CSSCtrl">

    <p class="text-{{color}}">测试CSS样式</p>

    <button class="btn btn-default" ng-click="setGreen()">绿色</button>

  </p>

</body>

<script src="js/angular-1.3.0.js"></script>

<script src="color.js"></script>

  

</html>

로그인 후 복사


19번째 줄을 보겠습니다. p 태그에 "color" 변수가 있습니다. "green"을 클릭하면 setGreen 함수가 실행되어 "color" 값이 "green"으로 변경되므로 클래스 이름이 변경되어 배경색이 변경되었습니다. 이 방법을 사용하면 요소를 직접 조작할 필요 없이 변수만 추가하면 됩니다. 코드가 간결하고 직관적입니다.

color.js의 내용을 다시 살펴보겠습니다.

1

2

3

4

5

6

7

8

9

var myCSSModule = angular.module(&#39;MyCSSModule&#39;, []);

myCSSModule.controller(&#39;CSSCtrl&#39;, [&#39;$scope&#39;,

  function($scope) {

    $scope.color = "red";

    $scope.setGreen = function() {

      $scope.color = "green";

    }

  }

])

로그인 후 복사


속성의 기본값은 " color"는 "red"”이므로 빨간색으로 표시되며, 클릭하면 기능이 실행되어 녹색으로 변합니다.

더 많은 Anglejs 연구 노트와 양방향 데이터 바인딩 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿