Tutorial Bermula AngularJS - AngularJS Model

Tutorial Bermula AngularJS - AngularJS Model_AngularJS

WBOY

Lepaskan： 2016-05-16 15:05:02

asal

1317 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!