AngularJS의 드롭다운 메뉴

1. AngularJS 드롭다운 메뉴의 기본 HTML 구문
2. ng-options 속성을 사용하여 AngularJS에서 드롭다운 메뉴 만들기
3. ng-repeat 속성을 사용하여 AngularJS에서 드롭다운 메뉴 만들기
4. AngularJS의 ng-options와 ng-repeat 속성의 차이점
5. 결론

AngularJS는 웹 애플리케이션을 구축하기 위한 JavaScript 프레임워크입니다. AngularJS는 데이터 바인딩 및 종속성 주입을 제공하여 수동 코드 작성의 필요성을 줄입니다.

이 기사에서는 AngularJS로 드롭다운 메뉴를 만드는 방법을 보여줍니다. 의 시작하자.

AngularJS 드롭다운 메뉴의 기본 HTML 구문

주제에 대해 알아보기 전에 먼저 Angular에서 드롭다운 상자의 기본 개념을 이해하겠습니다.

드롭다운 목록은 사용자가 목록에서 하나의 항목을 선택할 수 있는 일종의 선택 메뉴입니다. 콤보 상자 또는 풀다운 메뉴라고도 합니다.

주로 제목이나 > 버튼을 클릭하여 메뉴를 열고 닫을 수 있습니다. 선택 요소 또는 목록 항목은 웹 사이트 페이지에 드롭다운 상자를 추가하는 데 사용됩니다. 첫 번째 <option> 태그의 기본 옵션을 선택한 요소의 원하는 값으로 설정해야 합니다.

기본 HTML 구문을 살펴보겠습니다.

<dropdown placeholder="Cars" list="Cars" selected="Black Car" property="Model"></dropdown>

위의 구문은 드롭다운을 사용하는 방법의 예입니다. 사용자가 무엇이든 선택하기 전에 placeholder 매개변수는 표시할 텍스트를 지정합니다.

Cars 변수는 목록에 표시하려는 항목의 목록을 나타내며 property 변수와 함께 사용됩니다. 이 변수는 복잡한 JavaScript 목록 개체에서 사용자에게 표시되어야 하는 속성을 지정합니다. 마지막으로 selected 속성은 지정된 값을 상위 컨트롤러에 저장합니다.

AngularJS에서 ng-options 속성과 ng-repeat 속성은 일반적으로 드롭다운 메뉴를 만드는 데 사용되는 두 가지 방법입니다.

ng-options 속성을 사용하여 AngularJS에서 드롭다운 메뉴 만들기

ng-options 지시문은 선택 옵션이 있는 드롭다운 목록을 생성하는 AngularJS 구조입니다. 이 지시문은 선택 컨트롤이 페이지 템플릿의 일부여야 할 때만 사용해야 합니다.

ng-options 속성에는 여는 태그와 닫는 태그와 이 특정 옵션 그룹에 대한 옵션을 나타내는 둘 이상의 개체 배열이 있습니다.

각 개체는 두 가지 속성으로 구성됩니다. 첫 번째는 입력 필드에 표시될 텍스트이고 두 번째는 이 옵션의 작동 방식을 제어하는 ​​다른 매개변수가 있는 개체입니다.

이 지시문에 대한 예는 다음과 같습니다.

<div ng-app="demo" ng-controller="myCtrl">

<select ng-model="Options" ng-options="Names">

 </select>

   </div>  

  <script>

 var app = angular.module('demo', []);

 app.controller('myteam', function($scope) {

 $scope.names = ["Dan", "John", "Smith"];

 });

 </script>

ng-options를 사용하여 AngularJS에서 드롭다운 메뉴 만들기의 제한 사항

ng-options 속성은 Angular의 동적 옵션 목록에 대한 훌륭한 지시문입니다. ng-options 속성은 선택 목록에 옵션 배열을 표시하는 데 도움이 됩니다. 그러나 몇 가지 제한 사항이 있습니다.

제한 사항 중 하나는 ng-options가 ng-repeat 지시문을 사용하는 다른 Angular 구성 요소와 호환되지 않는다는 것입니다. 다른 구성 요소와 함께 ng-repeat를 사용하려면 목록에 항목을 생성하는 코드를 작성해야 합니다.

이 제한은 내부에서 무슨 일이 일어나고 있는지 모르는 경우 코드를 유지 관리하고 이해하기 어렵게 만들 수 있습니다.

ng-repeat 속성을 사용하여 AngularJS에서 드롭다운 메뉴 만들기

AngularJS의 ng-repeat 지시문을 사용하면 반복 중인 컬렉션의 모든 객체에 대해 HTML 요소를 반복할 수 있습니다.

ng-repeat 지시문을 사용하여 항목 목록을 생성할 수 있습니다(예: 드롭다운 목록 채우기). ng-repeat 지시문은 지정된 모든 배열 또는 개체 요소를 반복하고 사용된 HTML 속성에 따라 발견된 각 개체에 대해 더 많은 DOM 요소를 생성합니다.

Angular의 드롭다운 메뉴에 대해 자세히 알아보려면 여기를 클릭하세요.

이 지시문에 대한 예가 아래에 나와 있습니다.

<div ng-app="Sample" ng-controller="Testing">
<select>

 <option ng-repeat="Name">{{name}}</option>

 </select>

 </div>

  <script>

 var app = angular.module('Sample', []);

 app.controller('Testing', function($scope) {

 $scope.names = ["Rockstar", "Dan", "Patrick", "Han", "Jordan","John"];

 });

 </script>

ng-repeat를 사용하여 AngularJS에서 드롭다운 메뉴 만들기의 제한 사항

• 목록의 항목을 정의할 때 하나의 변수만 사용할 수 있으며 배열 또는 객체여야 합니다. 이는 루프에서 항목을 동적으로 추가 및 제거할 수 없으며 다른 데이터를 ng-repeat에 전달할 수 없음을 의미합니다.
• 인덱스는 AngularJS에 의해 자동으로 생성됩니다. 즉, 생성되는 숫자를 제어하지 않습니다. 이 제한을 극복하려면 목록에서 새 항목을 추가하거나 제거할 때마다 인덱스 번호를 수동으로 변경해야 합니다.

AngularJS의 ng-options와 ng-repeat 속성의 차이점

ng-options 지시문은 선택한 옵션을 사용할 수 없는 경우 선택 상자를 표시합니다. 가능한 모든 값의 목록을 만듭니다.

반면 ng-repeat 지시문은 선택할 수 있는 모든 값의 배열을 만듭니다.

또한 ng-options로 생성된 드롭다운은 선택한 값으로 개체를 가질 수 있는 반면 ng-repeat로 생성된 드롭다운은 선택한 값으로 문자열이 있어야 합니다.

ng-options 및 ng-repeat에 대해 더 알고 싶다면 여기를 클릭하세요.

결론

이 기사는 AngularJS에서 드롭다운 메뉴를 만드는 방법에 대한 많은 정보를 제공합니다. AngularJS에서 드롭다운 메뉴를 만들고 구현하고 시작하는 방법을 배웠습니다.

여기를 클릭하여 위에서 언급한 코드를 확인하십시오.