使用AngularJS處理單選框和複選框的簡單方法

使用AngularJS處理單選框和複選框的簡單方法_AngularJS

WBOY

發布： 2016-05-16 15:53:52

原創

1133 人瀏覽過

AngularJS對表單的處理相當簡單。在AngularJS使用雙向資料綁定方式進行表單驗證的時候，實質上它在幫我們進行表單處理。

使用複選框的例子很多，同時我們對它們的處理方式也有很多。這篇文章中我們將看一看把複選框和單選按鈕同資料變數綁定的方法和我們對它的處理方法。

建立Angular表單

在這篇文章裡，我們需要兩個檔案:index.html和app.js。 app.js用來保存所有的Angular程式碼（它不大），而index.html是動作運作的地方。首先我們創建AngularJS檔案。

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

登入後複製

在這個文件裡，我們所做的就是創建Angular應用程式。其中我們也建立了一個控制器和一個用來保存所有表單資料的物件。

下面我們看看index.html文件，在這個文件裡，我們建立了表單，然後進行了資料綁定。我們使用了Bootstrap快速地對頁面進行佈局。

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

登入後複製

創建完成之後，我們就有了具有name輸入的表單了。如果一切都按照我們設想的運行，那麼如果你在name輸入中鍵入內容，那麼你應當可在下面的

標籤段看到所輸入的內容了.<br /> <br /> <strong>複選框</strong></p> <p>在表單裡，複選框非常普遍。下面我們將看看Angular是怎麼使用ngModel實作資料綁定的。如果有許多複選框，那麼有時在把它綁定到物件的時候如何進行資料處理會讓人不知所措。 </p> <p>在我們所建立的formData物件的內部，我們也建立了另一個物件。我們稱它為favoriteColors，它請求使用者選擇最喜歡的顏色：<br /> <br /> </p> <div class="jb51code"> <pre class="brush:js;">  <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>