Anglejs 연구 노트의 양방향 데이터 바인딩-JS 튜토리얼-php.cn

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의 내용을 살펴보겠습니다.

<!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 내용을 보면

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의 내용을 살펴보세요.

<!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의 내용을 다시 살펴보겠습니다.

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";
    }
  }
])