Angular の選択リストのフィルター オプション
Muhammad Adil
2023年3月20日
ng-options は、モデルに保存される配列から項目を選択するための HTML ドロップダウン ボックスの作成を容易にするディレクティブです。 ng-options 評価式を分析し、配列またはオブジェクトを返すことにより、select 要素のオプション要素のリストを動的に構築します。
さらに、ng-options ディレクティブは Angular で select 要素を作成します。 ユーザーの入力によってアイテムのリストをフィルタリングできます。
Angular の選択リストでオプションをフィルタリングする手順
手順は次のとおりです。
-
まず、ターミナルで以下のコマンドを実行して Angular プロジェクトを作成します。
ng new angular_filter_select -
次に、
ng-optionsによってフィルタリングされるselectのコンポーネントを作成します。ng g c SelectFilter -
最後に、コンポーネントに
selectを追加し、フィルタリングに使用する式を渡します。 式は、フィルタリングされる変数名と一致する必要があるng-modelという属性を使用して渡されます。
上記の手順を使用して、ng-option フィルターの例を見てみましょう。
TypeScript コード:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.CountryName =[{"countryName":"England","isDisabled":false},
{"countryName":"Netherlands","isDisabled":false},
{"countryName":"USA","isDisabled":false},
{"countryName":"China","isDisabled":false},
{"countryName":"India","isDisabled":false}];
});
HTML コード:
<html ng-app="plunker">
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<H2>
Example of Using Filter with ng-options
</H2>
<select
ng-options="country.countryName as country.countryName disable when country.isDisabled for country in CountryName |filter:{isDisabled:false}"
ng-model="myCountry">
<option value="">Select a Country</option>
</select>
</body>
</html>
ここをクリック で、上記のコードのライブ デモを確認できます。
著者： Muhammad Adil
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