Borang AngularJS


Borang AngularJS ialah koleksi kawalan input.

Kawalan HTML

Elemen input HTML berikut dipanggil kawalan HTML:

  • elemen input

  • elemen pilih

  • elemen butang

  • elemen textarea

Borang HTML

Borang HTML biasanya wujud bersama-sama dengan kawalan HTML.

AngularJS Form Instance

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

</body>
</html>

Run Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Notenovalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

Analisis Instance

ng-app Arahan mentakrifkan aplikasi AngularJS. Arahan

ng-controller mentakrifkan pengawal aplikasi. Arahan

ng-model mengikat dua elemen input pada objek pengguna model. Fungsi

formCtrl menetapkan nilai awal objek master dan mentakrifkan kaedah reset(). Kaedah

reset() menetapkan objek pengguna sama dengan objek master. Arahan

ng-click memanggil kaedah reset() dan dipanggil apabila butang diklik.

Atribut novalidate tidak diperlukan dalam aplikasi anda, tetapi anda perlu menggunakannya dalam borang AngularJS untuk mengatasi pengesahan HTML5 standard.