AngularJS の基本的な知識のメモ - Filter_AngularJS
フィルターはデータを変更するために使用され、式に含めたり、パイプ ディレクティブを使用したりできます。以下は一般的に使用されるフィルターのリストです。
S.No. 名前 説明
1 大文字 テキストを大文字に変換します。
2 小文字 テキストを小文字に変換します。
3 通貨 通貨形式のテキスト。
4 フィルター 指定された基準に基づいて配列のサブセットをフィルターします。
5 ソート ソートでは、標準的な基本配列が提供されます。 キャップフィルター
パイプ文字を使用して大文字のフィルター式を追加します。ここでは、学生の名前をすべて大文字で印刷するために大文字フィルターが追加されています。
Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}
小文字フィルター
パイプ式を使用して小文字フィルターを追加します。生徒の名前を小文字で印刷するには、ここに小文字フィルターを追加します。
Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}
通貨フィルター
カナダドルフィルターはパイプ文字を使用して数値式を返します。ここでは、通貨形式を使用して料金を出力するために、フィルタ「通貨」を追加しました。
Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}
フィルターのフィルター
必要な件名のみを表示するには、subjectName をフィルターとして使用します。
Enter subject: <input type="text" ng-model="subjectName">
Subject:
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
並べ替えフィルター
タグでトピックを並べ替えるには、orderBy タグを使用します。
件名:
<ul>
<li ng-repeat="subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
例
次の例は、上記のすべてのフィルターを示します。
testAngularJS.html
<html>
<head>
<title>Angular JS Filters</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>
<tr><td>Subject:</td><td>
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td></tr>
</table>
</div>
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7364
15
1628
14
1353
52
1266
25
1214
29
入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル
Jun 15, 2017 pm 05:50 PM
Javascript は、コードの構成、コードのプログラミング パラダイム、およびオブジェクト指向理論の点で非常にユニークな言語です。しかし、JavaScript が 20 年間主流であったとはいえ、jQuery、Angularjs、さらには React などの人気のあるフレームワークを理解したい場合は、「Black Horse Cloud Classroom JavaScript Advanced Framework」を見てください。デザインビデオチュートリアル」。
Vue3 のフィルター関数: データをエレガントに処理する
Jun 18, 2023 pm 02:46 PM
Vue3 のフィルター関数: データをエレガントに処理する Vue は、大規模なコミュニティと強力なプラグイン システムを備えた人気のある JavaScript フレームワークです。 Vue のフィルター関数は、テンプレート内のデータを処理して書式設定できる非常に実用的なツールです。 Vue3 のフィルター関数にはいくつかの変更が加えられています。この記事では、Vue3 のフィルター関数を詳しく説明し、それらを使用してデータを適切に処理する方法を学びます。フィルター機能とは何ですか? Vue のフィルター関数は次のとおりです。
プラグインを使用して Vue でカスタム フィルターを実装するためのヒント
Jun 25, 2023 pm 05:01 PM
プラグインを使用して Vue でカスタム フィルターを実装するためのヒント Vue.js には、ビュー データのフィルター処理の必要性に対処する便利な方法、つまりフィルター (Filter) が提供されます。フィルターは主に、ビュー内のデータの書式設定と処理を担当して、データをより直感的で理解しやすくします。 Vue には、日付書式設定、通貨書式設定などの一般的に使用されるフィルターがいくつか組み込まれており、カスタム フィルターもサポートしています。この記事では、Vue プラグインを使用してカスタム フィルターを実装する方法を紹介し、いくつかの実用的なフィルター手法を提供します。
PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供します
Jun 27, 2023 pm 07:37 PM
今日の情報化時代において、ウェブサイトは人々が情報を入手し、コミュニケーションを図るための重要なツールとなっています。レスポンシブな Web サイトはさまざまなデバイスに適応し、ユーザーに高品質のエクスペリエンスを提供できます。これは、現代の Web サイト開発のホットスポットとなっています。この記事では、PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供する方法を紹介します。 PHP の概要 PHP は、Web 開発に最適なオープンソースのサーバー側プログラミング言語です。 PHP には、学びやすさ、クロスプラットフォーム、豊富なツール ライブラリ、開発効率など、多くの利点があります。
Vue テクノロジー開発でデータをフィルターおよび並べ替える方法
Oct 09, 2023 pm 01:25 PM
Vue テクノロジ開発でデータをフィルタリングおよび並べ替える方法 Vue テクノロジ開発では、データのフィルタリングと並べ替えは非常に一般的で重要な機能です。データのフィルタリングと並べ替えを通じて、必要な情報を迅速にクエリして表示できるため、ユーザー エクスペリエンスが向上します。この記事では、Vue でデータをフィルターおよび並べ替える方法を紹介し、読者がこれらの関数をよりよく理解して使用できるように具体的なコード例を示します。 1. データのフィルタリング データのフィルタリングとは、特定の条件に基づいて要件を満たすデータをフィルタリングすることを指します。 Vue では、comp を渡すことができます
Vue エラー: フィルター内のフィルターが正しく使用できません。解決するにはどうすればよいですか?
Aug 26, 2023 pm 01:10 PM
Vue エラー: フィルター内のフィルターが正しく使用できません。解決するにはどうすればよいですか?はじめに: Vue では、フィルターはデータの書式設定やフィルター処理に使用できる一般的に使用される関数です。ただし、使用中にフィルターを正しく使用できないという問題が発生する場合があります。この記事では、いくつかの一般的な原因と解決策について説明します。 1. 原因分析: フィルターが正しく登録されていません: Vue のフィルターは、テンプレートで使用する前に登録する必要があります。フィルタが正常に登録されなかった場合は、
PHP では、FILTER_VALIDATE_URL 定数は URL の検証に使用されるフィルターを表します
Sep 14, 2023 am 10:37 AM
FILTER_VALIDATE_URL 定数は、URL を検証するために使用されます。フラグ FILTER_FLAG_SCHEME_REQUIRED-URL は RFC に準拠している必要があります。 FILTER_FLAG_HOST_REQUIRED - URL にはホスト名が含まれている必要があります。 FILTER_FLAG_PATH_REQUIRED - URL にはドメイン名の後にパスが必要です。 FILTER_FLAG_QUERY_REQUIRED - URL にはクエリ文字列が必要です。戻り値 FILTER_VALIDATE_URL
PHP 電子メール フィルター: スパムをフィルターして識別します。
Sep 19, 2023 pm 12:51 PM
PHP 電子メール フィルター: スパムをフィルターして識別します。電子メールの普及に伴い、スパムの量も増え続けています。ユーザーにとって、受信するスパムの量は情報過多や時間の無駄につながる可能性があります。したがって、スパムメールをフィルタリングして識別する効率的な方法が必要です。この記事では、PHP を使用してシンプルだが効果的な電子メール フィルターを作成する方法と、具体的なコード例を示します。電子メール フィルタの基本原則 電子メール フィルタの基本原則は、電子メールが
