집 > 기사 > 웹 프론트엔드 > Anglejs 연구 노트 양방향 데이터 바인딩_AngularJS

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

WBOY원래의: 2016-05-16 15:38:061427검색

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

1. 간단한 예

이 예는 첫 번째 섹션에서 이미 보여드렸습니다. 여기로 이동하세요.

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

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

여기를 클릭하여 또 다른 예를 살펴보겠습니다. 기사에 나오는 첫 번째 예에서 {{greeting.text}} 및 {{text}}는 값 표현식이지만 페이지를 계속 새로 고치면 이러한 문제를 발견하게 됩니다. 즉, "{{greeting.text}} {{text}}"라는 문자열이 페이지에 잠시 나타나는 경우가 있습니다. 그렇다면 어떻게 해결해야 할까요?

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

예를 들어

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

다음으로 변경:

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

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

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

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

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

<!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>
 <div class="panel panel-primary">
  <div class="panel-heading">
   <div class="panel-title">双向数据绑定</div>
  </div>
  <div class="panel-body">
   <div class="row">
    <div class="col-md-12">
     <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
      <div class="form-group">
       <label class="col-md-2 control-label">
        邮箱：
       </label>
       <div class="col-md-10">
        <input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email">
       </div>
      </div>
      <div class="form-group">
       <label class="col-md-2 control-label">
        密码：
       </label>
       <div class="col-md-10">
        <input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">
       </div>
      </div>
      <div class="form-group">
       <div class="col-md-offset-2 col-md-10">
        <div class="checkbox">
         <label>
          <input type="checkbox" ng-model="userInfo.autoLogin">自动登录
         </label>
        </div>
       </div>
      </div>
      <div class="form-group">
       <div 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>
       </div>
      </div>
     </form>
    </div>
   </div>
  </div>
 </div>
</body>

</html>

Form.js의 내용을 다시 살펴보세요.

 var userInfoModule = angular.module('UserInfoModule', []);
 userInfoModule.controller('UserInfoCtrl', ['$scope',
  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: 'testtest@126.com',
     password: 'testtest',
     autoLogin: false
    }
   };
   $scope.resetForm = function() {
    $scope.userInfo = {
     email: "253445528@qq.com",
     password: "253445528",
     autoLogin: true
    };
   }
  }
 ])

효과 스크린샷은 다음과 같습니다.

위 사진에 구현된 기능은 다음과 같습니다.

1. "Get"을 클릭하면 콘솔, 이메일, 비밀번호, 선택한 상태(true, false)에 대한 세 가지 데이터가 출력됩니다.

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

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

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

4. 라벨 스타일을 동적으로 전환합니다

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

<!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>
  <div ng-controller="CSSCtrl">
    <p class="text-{{color}}">测试CSS样式</p>
    <button class="btn btn-default" ng-click="setGreen()">绿色</button>
  </div>
</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의 내용을 다시 살펴보겠습니다.

var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
  function($scope) {
    $scope.color = "red";
    $scope.setGreen = function() {
      $scope.color = "green";
    }
  }
])

"color" 속성의 기본값은 "red"이므로, 클릭하면 해당 기능이 실행되어 녹색으로 변합니다.

성명：

이전 기사：JS는 QQ effect_javascript 기술을 모방하여 3단계 수직 메뉴를 구현합니다.다음 기사：JS는 QQ effect_javascript 기술을 모방하여 3단계 수직 메뉴를 구현합니다.

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

관련 기사