AngularJS에서 부트 스트랩 드롭 다운으로 작업하는 방법은 무엇입니까?
이 게시물에서는 최고의 Angular 구성 요소 라이브러리 중 하나의 도움을 받아 AngularJS APP에서 부트스트랩 드롭다운으로 작업하는 방법을 배웁니다.
이 게시물에서는 최고의 Angular 구성 요소 라이브러리 중 하나의 도움을 받아 AngularJS APP에서 부트스트랩 드롭다운으로 작업하는 방법을 배웁니다.
Bootstrap Dropdown
아래 목록과 같이 간단한 부트스트랩 드롭다운 버튼을 만들 수 있습니다.
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Subject <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Physicsa></li> <li><a href="#">Matha></li> <li><a href="#">Chemistrya></li> <li><a href="#">Hindia></li> </ul> </div>
위에서 만든 드롭다운에서 항목을 선택할 때 다른 보기 또는 페이지로 이동하며 모든 항목은 드롭다운에 하드코딩되어 있습니다.
AngularJS 컨트롤러 데이터가있는 부트 스트랩 드롭 다운
이제 AngularJS 애플리케이션에서 부트스트랩 드롭다운을 생성해야 한다고 가정해 보겠습니다. 이를 만들려면 먼저 아래 목록과 같이 bootstrap CSS의 참조가 프로젝트에 추가되었는지 확인해야 합니다.
<link href="../Content/bootstrap.css" rel="stylesheet" /> <script src="../Scripts/angular.js"></script> <script src="../Scripts/angular-route.js"></script> <script src="home.js"></script>
다음으로 AngularJS 컨트롤러를 만들어 보겠습니다. 컨트롤러에는 bootstrap 드롭다운에 바인딩될 subjects라는 배열이 있습니다. 컨트롤러는 아래 목록에 표시된 대로 생성할 수 있습니다.
MyApp.controller('SubjectDropDownController', function ($scope) { $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English']; });
아래 목록과 같이 subjects 배열을 바인딩하여 드롭다운을 만들 수 있습니다.
<div ng-controller="SubjectDropDownController"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Subject <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li ng-repeat="a in subjects"><a href="#">{{a}}</a></li> </ul> </div> </div>
여기에서는 부트스트랩 드롭다운에서 AngularJS 컨트롤러의 배열을 바인딩하기 위해 다음 작업을 수행하고 있습니다.
- ng-controller 값을 SubjectDropDownController로 설정
- li 요소에 ng-repeat 지시문을 사용하여 배열의 요소를 반복합니다.
위의 드롭다운에서 모든 항목은 클릭하여 이동할 수 있는 링크입니다. 드롭다운 항목 클릭에서 컨트롤러 기능을 호출하려면 아래 목록과 같이 ng-click 지시문을 사용해야 합니다.
<div ng-controller="SubjectDropDownController"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Subject <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li ng-repeat="a in subjects"><a ng-click="dropboxitemselected()">{{a}}</a></li> </ul> </div> </div>
컨트롤러에서 아래 목록에 표시된 대로 함수를 생성해야 합니다.
MyApp.controller('SubjectDropDownController', function ($scope) { $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English']; $scope.dropboxitemselected = function () { alert("drop box item selected"); } });
드롭다운에서 항목 선택하기
드롭다운의 일반적인 요구 사항 중 하나는 항목을 선택하는 것입니다. 다른 방법이있을 수 있지만 다음 단계에서 논의 한 것처럼 간단한 방법으로 수행하는 것을 선호합니다.
- 컨트롤러의 $scope에 변수를 만듭니다. 변수 이름이 selecteditem 이라고 가정 해 보겠습니다.
- ng-click 지시문에서 함수를 호출하고 함수에 항목을 전달합니다.
- 함수에서 매개변수로 전달된 항목을 selecteditem 변수에 할당합니다.
- Data bind the drop-down display item to the selecteditem variable
컨트롤러는 아래 목록에 표시된 대로 수정할 수 있습니다.
MyApp.controller('SubjectDropDownController', function ($scope) { $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English']; $scope.selectedItem; $scope.dropboxitemselected = function (item) { $scope.selectedItem = item; alert($scope.selectedItem); } });
그리고 아래 목록과 같이 선택한 항목을 바인딩하도록 드롭다운을 수정할 수 있습니다.
<div ng-controller="SubjectDropDownController"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> {{selectedItem}} <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li ng-repeat="a in subjects"><a ng-click="dropboxitemselected(a)">{{a}}</a></li> </ul> </div> </div>
웹 API에서 데이터 가져오기
실시간 애플리케이션에서는 데이터베이스에서 데이터를 가져와 UI에 바인딩해야 할 수 있습니다. 데이터베이스에서 데이터를 노출하는 방법에는 여러 가지가 있습니다. 가장 인기 있는 방법 중 하나는 웹 API를 작성하는 것입니다. 필요한 경우 ASP.NET Web API 및 AngularJS 작업에 대한 단계별 가이드를 읽을 수 있습니다.
이제 웹 API를 만들었고 AngularJS 응용 프로그램에서 웹 API와 함께 작동하는 서비스를 만들어야 한다고 가정해 보겠습니다. 아래 목록에 표시된 대로 생성할 수 있습니다.
MyApp.factory('TeacherService', ['$http', function ($http) { var urlBase = 'http://localhost:25221/api'; var TeacherService = {}; TeacherService.getSubjects = function () { return $http.get(urlBase + '/Subjects'); }; }]);
다음으로 컨트롤러에서 AngularJS 서비스를 사용하여 웹 API에서 데이터를 가져와야 합니다. TeacherService를 종속성으로 전달한 다음 서비스의 getSubjects() 함수를 호출하여 웹 API에서 데이터를 가져옵니다.
MyApp.controller('SubjectDropDownController', function ($scope, TeacherService) { //$scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English']; $scope.subjects; $scope.selectedItem; $scope.dropboxitemselected = function (item) { $scope.selectedItem = item; alert($scope.selectedItem); } getSubjects(); function getSubjects() { TeacherService.getSubjects() .success(function (subjects) { $scope.subjects = subjects; console.log($scope.subjects); }) .error(function (error) { $scope.status = 'Unable to load subject data: ' + error.message; }); }; });
이러한 방식으로 데이터베이스에서 데이터를 쉽게 가져와 Angular 애플리케이션의 부트스트랩 드롭다운에 바인딩할 수 있습니다. 이 게시물이 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다!
