AngularJS의 드롭다운 메뉴

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

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-optionsng-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-optionsng-repeat 속성의 차이점

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

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

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

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

결론

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

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

Muhammad Adil avatar Muhammad Adil avatar

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

관련 문장 - Angular Dropdown