誰もが忘れられない AngularJS の 8 つの機能_AngularJS

AngularJS の見逃せない 8 つの機能を参考までに紹介します。具体的な内容は次のとおりです。

最初の 反復出力 ng-repeat タグ

ng-repeat は、table ul ol と他のタグを js の配列と完全に組み合わせます

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

出力の順序も指定できます:

<li ng-repeat="person in persons | orderBy:'name'">

2 番目の ng-model タグの動的バインディング

ユーザー入力と値を含む HTML タグは、js の変数に動的にバインドできます。
そしてそれは動的バインディングです。

<input type="text" ng-model='password'>

バインドされた変数の場合、{{}} を使用して

を直接参照できます

<span>you input password is {{password}}</span>

fiter に慣れていれば、必要な形式で簡単に出力できます

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

3 番目の クリック イベントを ng-click イベントにバインドします

ng-click を使用すると、クリック イベントをラベルに簡単にバインドできます。

<button ng-click="pressMe()"/>

もちろん、$scope ドメインで独自の pressMe メソッドを定義する必要があることが前提です。

従来の onclick メソッドとは異なり、次のようにオブジェクトを ng-click メソッドに渡すこともできます。

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

そしてもちろん ng-dblclick タグ

4 番目の 分岐ステートメント ng-switch on、ng-if/ng-show/ng-hide/ng-disabled タグ

分岐ステートメントを使用すると、インターフェイス上で論理的な判断を記述することができます。

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

5 番目の 検証構文 ng-trim ng-minlength ng-maxlength 必須 ng-pattern およびその他のタグ

フォームの入力ボックスでは、上記のタグを使用してユーザー入力を検証できます。
文字通りの意味はすでにご存知でしょう。

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

$scope.yourForm.inputText.$error.required を使用して、入力ボックスが空かどうかを判断できます
$scope.yourForm.inputText.$invalid を使用して、入力コンテンツが ng-pattern、ng-maxlength、maxlength
を満たすかどうかを判断できます。 $scope.userNum を通じて取得する入力コンテンツでは、ng-trim が存在するため、先頭と末尾の空白が削除されます。

ドロップダウン ボックスの 6 番目の ng-options タグ

ng-options は、ドロップダウン ボックス用に特別に作成されたタグです。

コードをコピー コードは次のとおりです:

f46249bb92649278d3dfd016a545389e18bb6ffaf0152bbe49cd8a3620346341

ドロップダウン ボックスに表示されるのは person.name です。いずれかを選択すると、選択した person.id が yourSelected. から取得できます。

7 番目 コントロール CSS NG スタイル タグ

ng-style を使用すると、CSS 属性を簡単に制御できます

<span ng-style="myColor">your color</span>

次のように myColor に値を割り当てることで、必要な効果を変更できます。

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

8 番目の 非同期リクエスト $http オブジェクト

AngularJS は、非同期リクエスト用に jquery の $.ajax に似たオブジェクトを提供します。
AngularJS では非同期操作が高く評価されているため、非同期パラメーターも提供する jquery.ajax とは異なり、$http 操作はすべて非同期です。

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

POST リクエストを作成している場合、params のデータは URL の末尾に配置され、data のデータはリクエスト本文に配置されます。

これを読んでもやめられない場合は、これらを自分のプロジェクトに適用してください。