Rumah >hujung hadapan web >tutorial js >Tutorial Bermula AngularJS - AngularJS Model_AngularJS

Tutorial Bermula AngularJS - AngularJS Model_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal: 2016-05-16 15:05:021412semak imbas

Bacaan berkaitan:

Tutorial pengenalan AngularJS - ungkapan AngularJS

Tutorial Pengenalan AngularJS - Perintah AngularJS

Seperti yang anda pelajari dalam tutorial sebelumnya tentang ungkapan dan arahan, model AngularJS (model ng) boleh mengikat nilai dalam medan input HTML kepada pembolehubah yang dicipta oleh AngularJS.

<!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="" ng-init="name='Jone Snow'">
名字: <input ng-model="name">
</div>
</body>
</html>

Ikatan dua hala Ikatan dua hala AngularJS bermakna model ng terikat pada medan input HTML dan juga terikat pada atribut AngularJS Oleh itu, apabila nilai medan input berubah, atribut nilai AngularJS juga akan Berubah.

<!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="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Snow";
});
</script>
<p>修改输入框的值，标题的名字也会相应修改。</p>
</body>
</html>

Arahan model keadaan aplikasi boleh memberikan nilai keadaan untuk data aplikasi

kotor Status adalah BENAR apabila data diubah suai, dan SALAH apabila data belum diubah suai. Walaupun ia diubah suai kepada nilai asal, ia adalah BENAR.

sah adalah BENAR apabila nilai input adalah sah, dan SALAH apabila ia adalah haram.

disentuh adalah BENAR jika diklik pada skrin sentuh, dan SALAH jika tiada klik.

Gunakan gaya CSS berdasarkan keadaan

<!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>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
</body>
</html>

Medan input menambah keadaan yang diperlukan Apabila tiada input dalam medan input, model ng menambah gaya ng-tidak sah pada medan input. Jika tidak, padamkan gaya ng-tidak sah. Arahan model ng menambah/mengalih keluar gaya berikut berdasarkan keadaan medan borang: - ng-kosong - ng-tidak-kosong - ng-disentuh - ng-tidak disentuh - ng-sah - ng-tidak sah - ng-kotor - ng-pending - ng-pristine menggunakan model ng untuk mengesahkan format e-mel

<!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>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
</body>
</html>

Apabila atribut myForm.myAddress.$error.email adalah BENAR (format e-mel tidak betul), ng-show akan mengawal kandungan span yang akan dipaparkan.

Kandungan di atas ialah model AngularJS bagi tutorial pengenalan AngularJS yang diperkenalkan oleh editor saya harap ia akan membantu semua orang!

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：organisasi nota kajian jqGrid - bahagian lanjutan (1)_jqueryArtikel seterusnya：organisasi nota kajian jqGrid - bahagian lanjutan (1)_jquery

Artikel berkaitan

Lihat lagi