Cara mudah untuk mengendalikan butang radio dan kotak semak menggunakan AngularJS

Cara mudah untuk mengendalikan butang radio dan kotak semak menggunakan AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:53:52

asal

1194 orang telah melayarinya

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 = {};
     
  });

Salin selepas log masuk

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

Salin selepas log masuk

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

Kotak semak

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

<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? </label> </div>

<label>Chicken or the Egg?</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>