AngularJS 入門チュートリアル - AngularJS Model_AngularJS-jsチュートリアル-php.cn

AngularJS 入門チュートリアル - AngularJS Model_AngularJS

WBOY

リリース： 2016-05-16 15:05:02

オリジナル

1346 人が閲覧しました

関連記事:

AngularJS 入門チュートリアル - AngularJS 式

AngularJS 入門チュートリアル - AngularJS コマンド

式とディレクティブに関する前のチュートリアルで学んだように、AngularJS モデル (ng-model) は、HTML 入力フィールドの値を 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>

ログイン後にコピー

双方向バインディング AngularJS の双方向バインディングは、ng-model が HTML の入力フィールドにバインドされ、AngularJS の属性にもバインドされることを意味します。したがって、入力フィールドの値が変更されると、その属性もバインドされます。 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="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>

ログイン後にコピー

アプリケーション状態 ng-model ディレクティブは、アプリケーションデータの状態値を提供できます

dirty データが変更されている場合はステータスが TRUE、データが変更されていない場合は FALSE になります。元の値に修正してもTRUEとなります。

valid は、入力値が正当な場合は TRUE、不正な場合は FALSE です。

touched は、タッチスクリーン上でクリックされた場合は TRUE、クリックされていない場合は FALSE になります。

状態に基づいて CSS スタイルを適用する

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

ログイン後にコピー

入力フィールドに必要な状態が追加されます。入力フィールドに入力がない場合、ng-model は入力フィールドに ng-invalid スタイルを追加します。それ以外の場合は、ng-invalid スタイルを削除します。 ng-model ディレクティブは、フォームフィールドの状態に基づいて次のスタイルを追加または削除します。 - ng-empty - ng-not-empty - ng-touched - ng-untouched - ng-valid - ng-invalid - ng-dirty - ng-pending - ng-pristine は ng-model を使用してメール形式を検証します

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

ログイン後にコピー

myForm.myAddress.$error.email 属性が TRUE (電子メール形式が正しくない) の場合、ng-show は表示されるスパンコンテンツを制御します。

上記の内容は、編集者が紹介したAngularJS入門チュートリアルのAngularJSモデルです。皆様のお役に立てれば幸いです。