Angular에서 선택 목록의 필터 옵션
Muhammad Adil
2023년3월20일
ng-options는 모델에 저장될 배열에서 항목을 선택하기 위한 HTML 드롭다운 상자를 쉽게 생성할 수 있도록 하는 지시문입니다. ng-options 평가 표현식을 분석하고 배열 또는 객체를 반환하여 선택 요소에 대한 옵션 요소 목록을 동적으로 구성합니다.
또한 ng-options 지시문은 Angular에서 선택 요소를 생성합니다. 사용자 입력으로 항목 목록을 필터링할 수 있습니다.
Angular에서 선택 목록의 옵션을 필터링하는 단계
단계는 다음과 같습니다.
-
먼저 터미널에서 아래 명령을 실행하여 Angular 프로젝트를 만듭니다.
ng new angular_filter_select -
다음으로
ng-options로 필터링될select에 대한 구성 요소를 만듭니다.ng g c SelectFilter -
마지막으로 구성 요소에
select를 추가하고 필터링에 사용할 표현식을 전달합니다. 표현식은 필터링되는 변수 이름과 일치해야 하는ng-model이라는 속성을 사용하여 전달됩니다.
위의 단계를 사용하여 ng-option 필터의 예를 살펴보겠습니다.
타입스크립트 코드:
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