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

nota kajian angularjs data dua hala binding_AngularJS

May 16, 2016 pm 03:38 PM
angularjs Pengikatan data dua hala

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>
Salin selepas log masuk

Tukar kepada:

"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>"; 
Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

2022年最新5款的angularjs教程从入门到精通 2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

Cara menyelesaikan ralat Vue: Tidak dapat menggunakan model v dengan betul untuk pengikatan data dua hala Cara menyelesaikan ralat Vue: Tidak dapat menggunakan model v dengan betul untuk pengikatan data dua hala Aug 25, 2023 pm 04:13 PM

Cara menyelesaikan ralat Vue: Tidak dapat menggunakan model v dengan betul untuk pengikatan data dua hala Pengenalan: Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak fungsi yang mudah, termasuk arahan model v untuk melaksanakan pengikatan data dua hala. Walau bagaimanapun, kadangkala kita mungkin menghadapi beberapa ralat semasa menggunakan model v, terutamanya apabila berurusan dengan struktur data yang kompleks. Artikel ini akan memperkenalkan beberapa ralat model v biasa dan menyediakan penyelesaian serta contoh kod. Ralat: Pengikatan dua hala bagi v-model dan sifat objek

Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Jun 27, 2023 pm 07:37 PM

Dalam era maklumat hari ini, laman web telah menjadi alat penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Tapak web responsif boleh menyesuaikan diri dengan pelbagai peranti dan memberikan pengguna pengalaman berkualiti tinggi, yang telah menjadi tumpuan dalam pembangunan tapak web moden. Artikel ini akan memperkenalkan cara menggunakan PHP dan AngularJS untuk membina tapak web responsif untuk memberikan pengalaman pengguna yang berkualiti tinggi. Pengenalan kepada PHP PHP ialah bahasa pengaturcaraan sisi pelayan sumber terbuka yang sesuai untuk pembangunan web. PHP mempunyai banyak kelebihan, seperti mudah dipelajari, merentas platform, perpustakaan alat yang kaya, kecekapan pembangunan

Bina aplikasi web menggunakan PHP dan AngularJS Bina aplikasi web menggunakan PHP dan AngularJS May 27, 2023 pm 08:10 PM

Dengan pembangunan berterusan Internet, aplikasi Web telah menjadi bahagian penting dalam pembinaan maklumat perusahaan dan cara kerja pemodenan yang diperlukan. Untuk menjadikan aplikasi web mudah dibangunkan, diselenggara dan dikembangkan, pembangun perlu memilih rangka kerja teknikal dan bahasa pengaturcaraan yang sesuai dengan keperluan pembangunan mereka. PHP dan AngularJS ialah dua teknologi pembangunan web yang sangat popular. Kedua-duanya adalah penyelesaian bahagian pelayan dan bahagian pelanggan. Penggunaan gabungan mereka boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna aplikasi web. Kelebihan PHPPHP

Gunakan PHP dan AngularJS untuk membangunkan platform pengurusan fail dalam talian untuk memudahkan pengurusan fail Gunakan PHP dan AngularJS untuk membangunkan platform pengurusan fail dalam talian untuk memudahkan pengurusan fail Jun 27, 2023 pm 01:34 PM

Dengan populariti Internet, semakin ramai orang menggunakan rangkaian untuk memindahkan dan berkongsi fail. Namun, atas pelbagai sebab, pengurusan fail menggunakan kaedah tradisional seperti FTP tidak dapat memenuhi keperluan pengguna moden. Oleh itu, mewujudkan platform pengurusan fail dalam talian yang mudah digunakan, cekap dan selamat telah menjadi satu trend. Platform pengurusan fail dalam talian yang diperkenalkan dalam artikel ini adalah berdasarkan PHP dan AngularJS Ia boleh melakukan muat naik, memuat turun, mengedit, memadam dan operasi lain dengan mudah, dan menyediakan satu siri fungsi yang berkuasa, seperti perkongsian fail, carian,

Bagaimana untuk menggunakan AngularJS dalam pengaturcaraan PHP? Bagaimana untuk menggunakan AngularJS dalam pengaturcaraan PHP? Jun 12, 2023 am 09:40 AM

Dengan populariti aplikasi web, rangka kerja bahagian hadapan AngularJS telah menjadi semakin popular. AngularJS ialah rangka kerja JavaScript yang dibangunkan oleh Google yang membantu anda membina aplikasi web dengan keupayaan aplikasi web dinamik. Sebaliknya, untuk pengaturcaraan bahagian belakang, PHP ialah bahasa pengaturcaraan yang sangat popular. Jika anda menggunakan PHP untuk pengaturcaraan sisi pelayan, maka menggunakan PHP dengan AngularJS akan membawa lebih banyak kesan dinamik ke tapak web anda.

Bina aplikasi web satu halaman menggunakan Flask dan AngularJS Bina aplikasi web satu halaman menggunakan Flask dan AngularJS Jun 17, 2023 am 08:49 AM

Dengan perkembangan pesat teknologi Web, Aplikasi Web Halaman Tunggal (SinglePage Application, SPA) telah menjadi model aplikasi Web yang semakin popular. Berbanding dengan aplikasi web berbilang halaman tradisional, kelebihan terbesar SPA ialah pengalaman pengguna lebih lancar, dan tekanan pengkomputeran pada pelayan juga sangat berkurangan. Dalam artikel ini, kami akan memperkenalkan cara membina SPA mudah menggunakan Flask dan AngularJS. Flask ialah Py ringan

AngularJS基础入门介绍 AngularJS基础入门介绍 Apr 21, 2018 am 10:37 AM

这篇文章介绍的内容是关于AngularJS基础入门介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下。

See all articles