cari

Rumah >hujung hadapan web >tutorial js >Cara mudah untuk mengendalikan butang radio dan kotak semak menggunakan AngularJS_AngularJS

Cara mudah untuk mengendalikan butang radio dan kotak semak menggunakan AngularJS_AngularJS

WBOY
WBOYasal
2016-05-16 15:53:521197semak imbas

Pemprosesan borang AngularJS agak mudah. Apabila AngularJS menggunakan pengikatan data dua hala untuk pengesahan borang, ia pada asasnya membantu kami dengan pemprosesan borang.

Terdapat banyak contoh penggunaan kotak pilihan, dan terdapat banyak cara yang boleh kita atasi. Dalam artikel ini kita akan melihat pada kotak pilihan yang mengikat dan butang radio kepada pembolehubah data dan perkara yang boleh kita lakukan dengannya.

Buat bentuk Sudut

Dalam artikel ini, kami memerlukan dua fail: index.html dan app.js. app.js ialah tempat semua kod Angular disimpan (ia tidak besar), dan index.html ialah tempat tindakan dijalankan. Mula-mula kita buat fail AngularJS. 

// app.js
 
var formApp = angular.module('formApp', [])
 
  .controller('formController', function($scope) {
  
    // we will store our form data in this object
    $scope.formData = {};
     
  });

Dalam fail ini, semua yang kami lakukan ialah mencipta aplikasi Angular. Kami juga mencipta pengawal dan objek untuk menyimpan semua data borang.

Mari kita lihat fail index.html Dalam fail ini, kami mencipta borang dan kemudian melakukan pengikatan data. Kami menggunakan Bootstrap untuk susun atur halaman dengan cepat. 

<-- index.html -->
<!DOCTYPE html>
<html>
<head>
 
  <!-- CSS -->
  <!-- load up bootstrap and add some spacing -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <style>
    body     { padding-top:50px; }
    form      { margin-bottom:50px; }
  </style>
 
  <!-- JS -->
  <!-- load up angular and our custom script -->
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="app.js"></script>
</head>
 
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
 
  <h2>Angular Checkboxes and Radio Buttons</h2>
 
  <form>
   
    <!-- NAME INPUT -->
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" name="name" ng-model="formData.name">
    </div>
     
    <!-- =============================================== -->
    <!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE -->
    <!-- =============================================== -->
     
    <!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
    <button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
     
  </form>
   
  <!-- SHOW OFF OUR FORMDATA OBJECT -->
  <h2>Sample Form Object</h2>
  <pre class="brush:php;toolbar:false">
    {{ formData }}

Selepas penciptaan selesai, kami mempunyai borang dengan input nama. Jika semuanya berfungsi seperti yang kami bayangkan, jika anda menaip sesuatu dalam input nama, anda sepatutnya dapat melihatnya dalam bahagian teg 8ab1222b1e140d8f9d06365d507f2bfc

Kotak semak

Kotak semak adalah sangat biasa dalam bentuk. Seterusnya kita akan melihat bagaimana Angular menggunakan ngModel untuk melaksanakan pengikatan data. Jika anda mempunyai banyak kotak pilihan, kadangkala ia boleh membingungkan cara mengendalikan data apabila mengikatnya pada objek.

Di dalam objek formData yang kami buat, kami juga mencipta objek lain. Kami memanggilnya warna kegemaran dan ia meminta pengguna memilih warna kegemaran: 



<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
  </label>
</div>
Apabila pengguna mengklik mana-mana kotak pilihan di atas, mereka serta-merta melihat perubahan objek formData. Kami menyimpan nilai kotak semak dalam objek fromData.favoriteColors. Dengan cara ini kami menghantar nilai kotak semak kepada pelayan.

Pemprosesan klik kotak semak

Kadangkala anda perlu melakukan sesuatu dengan seseorang selepas mereka mengklik pada kotak pilihan. Pemprosesan yang perlu anda lakukan mungkin seperti berikut: mengira nilai, menukar beberapa pembolehubah atau melaksanakan pengikatan data. Untuk melakukan ini, anda mencipta fungsi dalam app.js menggunakan $scope.yourFunction = function() {};. Kemudian anda boleh menggunakan ng-click="yourFunction()" pada kotak pilihan untuk memanggil fungsi ini.

Terdapat banyak cara untuk mengendalikan kotak semak borang, dan Angular menyediakan kaedah yang sangat mudah: gunakan ng-click untuk memanggil fungsi yang ditentukan pengguna.

Sesuaikan nilai yang sepadan dengan kotak semak

Secara lalai, nilai yang terikat pada kotak pilihan adalah benar atau palsu. Kadang-kadang kita ingin mengembalikan nilai lain. Angular menyediakan cara yang sangat baik untuk menangani perkara ini: menggunakan ng-ture-value dan ng-false-value.

Kami menambah satu lagi set kotak pilihan, tetapi kali ini kami tidak lagi menggunakan nilai benar atau palsu, tetapi nilai yang ditentukan pengguna. 



<!-- CUSTOM VALUE CHECKBOXES -->
<label>Personal Question</label>
<div class="checkbox">
  <label>
    <input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish">
    Are you awesome&#63;
  </label>
</div>
Selain itu, kini kami telah menambah pembolehubah yang hebat pada objek formData. Jika nilai ini ditetapkan kepada benar pada masa ini, nilai yang dikembalikan hendaklah ofCourse Jika ditetapkan kepada palsu, nilai yang dikembalikan hendaklah iWish.

Kotak semak

Menurut dokumentasi rasmi, ini berbeza daripada butang radio: 



<input type="radio"
  ng-model="string"
  value="string"
  [name="string"]
  [ng-change="string"]
  ng-value="string">
Untuk mengetahui lebih lanjut tentang kotak pilihan, sila ikuti

dokumentasi kotak pilihan sudut.
Butang radio

Butang radio lebih mudah daripada kotak semak kerana tidak perlu menyimpan data berbilang pilihan. Butang radio ialah nilai.



<!-- RADIO BUTTONS -->
<label>Chicken or the Egg&#63;</label>
<div class="form-group">
  <div class="radio">
    <label>
      <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">
      Chicken
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">
      Egg
    </label>
  </div>
</div>
Sama seperti ini, butang radio terikat pada objek data.

Penggunaan butang radio

Menurut

dokumentasi rasmi, ini adalah pilihan yang disediakan: 

<input type="radio"
    ng-model="string"
    value="string"
    [name="string"]
    [ng-change="string"]
    ng-value="string">

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：Pemalam kesan karusel automatik imej dan teks dilaksanakan oleh JQuery_jqueryArtikel seterusnya：Pemalam kesan karusel automatik imej dan teks dilaksanakan oleh JQuery_jquery

Artikel berkaitan

Lihat lagi