AngularJS でチェックボックスリストを作成する
このチュートリアルでは、AngularJS で簡単なチェックボックスリストを作成する方法を説明します。ng-repeat ディレクティブを使用して、selected というプロパティを含むオブジェクトの配列を反復処理します。
また、ng-model を使用して、配列内の各オブジェクトの選択されたプロパティをチェックボックス入力にバインドします。
Angular チェックボックスリストを作成する手順
次の手順は、Angular チェックボックスリストを作成するためのガイドです。
-
新しい AngularJS プロジェクトを作成します。
-
コントローラーにデータを追加します。
-
リスト項目をコントローラーに追加し、
ng-repeatディレクティブを追加します。 -
チェックボックスリストを HTML ファイルに追加し、
ng-modelディレクティブを追加します。 -
コントローラー内のアイテムをループしてチェックされているかどうかを確認し、それに応じてアイテムを表示または非表示にする関数を作成します。
Angular チェックボックスリストの作成に役立つ例について説明しましょう。
Angular アプリの構築を開始するには、開発環境をセットアップする必要があります。このために、NodeJS と AngularCLI ツールをシステムにグローバルにインストールします。
これを行うには、次のコマンドを実行します。
$ng new angular-checkbox-list-app
この後、JavaScript と HTML のコードを書いてみましょう。
JavaScript コード：
angular.module('sam', ['checklist-model'])
.controller('demo', function($scope) {
$scope.countryList = [
{ name: 'America'},
{ name: 'England'},
{ name: 'Canada'},
{ name: 'Scotland'}
];
$scope.selected = {
country: []
};
});
HTML コード：
<div ng-app="sam">
<div ng-controller="demo">
<h2>
Example of Angular Checkbox List
</h2>
<label ng-repeat="country in countryList"><input type="checkbox" checklist-model="selected.country" checklist-value="country" /> {{country.name}}<br/> </label>
<br/>
<p>
Selection will show here
</p>
{{selected.country}}
</div>
</div>
出力：
この例では、いくつかの国のリストを作成し、主に ng-repeat を使用しました。これは、テーブル、リスト、または別の UI コンポーネントのデータを表示するために使用されます。
さらに、使いやすく、直感的で、多くのカスタマイズが可能です。最後に、Angular チェックボックスリストでは、コード全体を壊すことなく、アイテムを簡単に追加または削除できます。それはあなたのニーズに合わせてリストを柔軟にします。
ここをクリックして、上記のコードのライブデモを確認してください。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook