Angular를 사용하여 일상적인 작업을 수행하는 방법을 배우고 완벽하게하면 경력을 상당히 빠르게 향상시킬 수 있습니다. 특히 . 이 기사에서는 개발자가 수천 번에 걸쳐 수행해야하는 작업 중 하나 인 겸손한 드롭 다운 상자 만들기에 대해 논의 할 것입니다. 이 블로그에서 다루는 주제는 다음과 같습니다.
Angular는 무엇입니까?
Angular를 사용하여 드롭 다운 상자를 만드는 방법에 대한 블로그를 읽고 있다면 이미 Angular에 대한 일반적인 아이디어를 가지고 있다고 가정 할 수 있습니다. 인터넷의 변덕과 공상으로 인해이 블로그를 우연히 발견 한 분들은 프런트 엔드 개발 프레임 워크입니다. 기술 대기업 인 Google에서 개발하고 유지 관리합니다. Gmail, PayPal 및 Lego와 같은 단일 페이지 웹 애플리케이션을 개발하는 모듈 방식을 제공합니다. Angular를 사용하여 빌드 된 애플리케이션은 Model-View-View-Model 접근 방식을 구현합니다.
드롭 다운 상자 란 무엇입니까?
드롭 다운 상자는 사용자가 드롭 다운 상자를 활성화 할 때까지 처음에 하나의 선택 항목 만 표시되므로 옵션 배열을 표시하는 깔끔한 방법입니다. 웹 페이지에 드롭 다운 상자를 추가하려면 고르다 요소 또는 목록 항목 . 선택 요소의 첫 번째 태그에는 선택한 옵션이 selected 값으로 설정되어 있어야합니다. 제가 의미하는 바를 보여주는 작은 코드 스 니펫이 있습니다.
연결 및 연결되지 않은 조회의 차이
옵션 1 옵션 2 옵션 3
물론 위의 코드는 예상되는 동작을 위해 특정 자바 스크립트가 필요하지만 드롭 다운 메뉴의 기본 골격은 동일하게 유지됩니다. 이제 Angular에서이 작업을 수행하는 방법을 살펴 보겠습니다.
Angular를 사용하는 드롭 다운 상자
솔직히 말해서, 드롭 다운 박스를 각도로 구현할 수있는 모든 가능한 방법을 보여주는 것은 다소 어렵습니다. 모든 개발자의 두뇌는 고유 한 방식으로 논리를 처리하며 제 경력에서 몇 가지 미친 드롭 다운 메뉴를 보았습니다. 저는 겸손하게 여러분에게 다소 기본적인 드롭 다운 메뉴 접근 방식을 보여 드리겠습니다.
방법 1 : ng-options를 사용하여 드롭 다운 목록 만들기
ng-options를 사용할 수 있습니다. 배열 또는 항목 목록에서 드롭 다운 메뉴를 만듭니다.
요리사 대 꼭두각시 대 젠킨스
var app = angular.module ( 'demo', []) app.controller ( 'myCtrl', function ($ scope) {$ scope.names = [ 'Demavand', 'Pradeep', 'Ashutosh']})방법 2 : ng-repeat를 사용하여 드롭 다운 목록 만들기
다재다능한 Angular , 분명히 기본 드롭 다운 메뉴를 만드는 여러 가지 방법이 있습니다. ng-repeat 지시문은 배열의 각 항목에 대해 HTML 코드 블록을 반복하며 드롭 다운 목록에서 옵션을 만드는 데 사용할 수 있지만 ng-options 지시문은 옵션으로 드롭 다운 목록을 채우기 위해 특별히 만들어졌으며 중요한 장점 즉, ng-options로 만든 드롭 다운 메뉴는 선택한 값을 객체로 만들 수있는 반면 ng-repeat로 만든 드롭 다운은 문자열이어야합니다.
이 특정 코드 조각은 ng-repeat를 사용하여 동일한 목록을 구현합니다.
{{name}} var app = angular.module ( 'demo', []) app.controller ( 'myCtrl', function ($ scope) {$ scope.names = [ 'Demavand', 'Pradeep', 'Ashutosh' ]})이것으로이 다소 짧은 블로그 '각도를 사용한 드롭 다운 목록'의 끝으로 이동합니다. 이제 자신의 프로젝트에서 드롭 다운 메뉴를 구현할 수있는 방법에 대한 아이디어를 얻었기를 바랍니다. 이 블로그에 대해 의문이있는 경우 아래 댓글 섹션에 댓글로 게시 할 수 있습니다. 드롭 다운 상자를 만드는 독창적 인 방법을 공유 할 수도 있습니다.
파이썬으로 기능하기
Angular 프레임 워크에 대해 자세히 알아 보려면 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육은 Angular를 심층적으로 이해하고 주제에 대한 숙달을 달성하는 데 도움이됩니다.
질문이 있으십니까? ”Angular Dropdown”의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.