Rumah >hujung hadapan web >tutorial js >nota kajian angularjs data dua hala binding_AngularJS

nota kajian angularjs data dua hala binding_AngularJS

WBOYasal: 2016-05-16 15:38:061482semak imbas

Kali ini kami akan menerangkan pengikatan data dua hala sudut secara terperinci.

1. Contoh mudah

Kami telah menunjukkan contoh ini dalam bahagian pertama Untuk melihatnya, pergi ke sini

Kesan yang dicapai di sini ialah apabila anda memasukkan kandungan dalam kotak input, kandungan yang sepadan akan ditukar dengan sewajarnya. Ini mencapai pengikatan dua hala data.

2. Penggunaan ungkapan nilai dan ng-bind

Mari lihat contoh lain, klik di sini Dalam contoh pertama yang muncul dalam artikel, {{greeting.text}} dan {{text}} ialah ungkapan nilai, tetapi jika anda terus menyegarkan halaman, anda Anda. akan menemui masalah sedemikian, iaitu, rentetan "{{greeting.text}} {{text}}" kadangkala akan muncul di halaman untuk seketika. Jadi bagaimana kita harus menyelesaikannya?

Perintah ng-bind digunakan di sini: digunakan untuk mengikat ungkapan data.

Sebagai contoh, kita boleh meletakkan

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

Tukar kepada:

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

Selepas pembetulan ini, rentetan yang tidak diingini tidak akan muncul apabila halaman dimuat semula.

Tetapi menggunakan arahan sentiasa kurang cekap daripada menggunakan ungkapan secara langsung, jadi kami telah meringkaskan peraturan biasa: Secara umumnya, indeks menggunakan ng-bind, dan templat seterusnya menggunakan borang '{{}}'.

3. Senario biasa pengikatan dua hala - bentuk

Mula-mula lihat kandungan borang.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>

Lihat kandungan Form.js sekali lagi:

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

Tangkapan skrin kesan adalah seperti berikut:

Fungsi yang dilaksanakan dalam gambar di atas ialah:

1. Klik "Dapatkan" untuk mengeluarkan tiga data pada konsol, e-mel, kata laluan dan status yang dipilih (benar, palsu)

2. Klik "Tetapan": anda boleh menukar nilai dua kotak input dan status kotak semak yang tidak ditandai

3. Klik "Reset": anda boleh memulihkan data kepada data asal.

Memandangkan model ng dalam kotak input dan nilai dalam pengawal melaksanakan pengikatan dua hala, menukar nilai kotak input atau menukar nilai dalam pengawal akan mengubah nilai kedua-dua pihak dengan sewajarnya. Hanya beberapa baris kod boleh mencapai fungsi yang begitu hebat. Tidakkah anda fikir ia menakjubkan? Ia memang menakjubkan, tetapi apa yang lebih menakjubkan masih belum datang! Teruskan!

4 Tukar gaya label secara dinamik

Lihat kandungan color.html dahulu:

<!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>

Mari lihat baris 19: Terdapat pembolehubah "warna" dalam tag p Apabila "hijau" diklik, fungsi setGreen dilaksanakan dan nilai "warna" ditukar kepada "hijau", jadi kelas. nama ditukar , yang turut menukar warna latar belakang. Menggunakan kaedah ini, kita tidak perlu memanipulasi unsur secara langsung, tetapi hanya menambah pembolehubah. Kod ini ringkas dan intuitif.

Mari lihat kandungan color.js sekali lagi:

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

Nilai lalai atribut "warna" ialah "merah", jadi ia memaparkan merah apabila diklik, fungsi itu dilaksanakan dan bertukar menjadi hijau.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JS melaksanakan menu menegak tiga peringkat dengan kemahiran QQ effect_javascript tiruanArtikel seterusnya：JS melaksanakan menu menegak tiga peringkat dengan kemahiran QQ effect_javascript tiruan

Artikel berkaitan

Lihat lagi