¿Cómo trabajar con Bootstrap DropDown en AngularJS?

En esta publicación, aprenderemos cómo trabajar con el menú desplegable de Bootstrap en una aplicación AngularJS con la ayuda de una de las mejores bibliotecas de componentes Angular que existen.

Bootstrap Dropdown

Se puede crear un simple botón desplegable de arranque como se muestra en la lista a continuación:

<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>

En el menú desplegable que hemos creado anteriormente, se nos navegará a otra vista o página al seleccionar un elemento y todos los elementos están codificados en el menú desplegable.

Menú desplegable de arranque con datos del controlador AngularJS

Ahora supongamos que necesitamos crear un menú desplegable de arranque en la aplicación AngularJS. Para crear eso, primero debemos asegurarnos de que la referencia de bootstrap CSS se agregue en el proyecto, como se muestra en la lista a continuación:

 <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>

A continuación, vamos a crear el controlador AngularJS. En el controlador, hay una matriz llamada subjects que se vinculará al menú desplegable de arranque. El controlador se puede crear como se muestra en la lista a continuación:

MyApp.controller('SubjectDropDownController', function ($scope) {
    $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
});

Podemos vincular la matriz de sujetos para crear un menú desplegable como se muestra en la lista a continuación:

<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>

Aquí estamos realizando las siguientes tareas para vincular la matriz desde el controlador AngularJS en el menú desplegable de arranque:

1. Establecer el valor de ng-controller en SubjectDropDownController
2. Uso de la directiva ng-repeat en el elemento li para repetir los elementos de la matriz

En el menú desplegable anterior, todos los elementos son enlaces a los que navegaremos haciendo clic en ellos. Para invocar una función de controlador en el clic del elemento desplegable, debemos usar la directiva ng-click como se muestra en la lista a continuación:

<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>

En el controlador necesitamos crear una función como se muestra en la lista a continuación:

MyApp.controller('SubjectDropDownController', function ($scope) {
    $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
    $scope.dropboxitemselected = function () {
        alert("drop box item selected");
    }
});

Seleccionar un elemento en el menú desplegable

Un requisito común en el menú desplegable sería seleccionar un elemento. Puede haber otras formas de hacerlo, pero prefiero hacerlo de una manera sencilla como se comenta en los siguientes pasos:

1. Cree una variable en el $scope del controlador. Digamos que el nombre de la variable es selecteditem
2. En la directiva ng-click, llame a una función y pase el elemento en la función
3. Asigne el elemento que se pasa como parámetro en la función a la variable selecteditem
4. Data bind the drop-down display item to the selecteditem variable

El controlador se puede modificar como se muestra en la lista a continuación:

MyApp.controller('SubjectDropDownController', function ($scope) {
    $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
    $scope.selectedItem;
    $scope.dropboxitemselected = function (item) {
        $scope.selectedItem = item;
        alert($scope.selectedItem);
    }
});

Y el menú desplegable se puede modificar para vincular el elemento seleccionado como se muestra en la lista a continuación:

<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>

Obtención de datos de la API web

En las aplicaciones en tiempo real, es posible que tengamos que traer datos de la base de datos y enlazarlos a la interfaz de usuario. Hay varias formas de exponer los datos de la base de datos. Uno de los enfoques más populares es escribir la API web.  Si es necesario, es posible que desee leer Una guía paso a paso para trabajar con la API web de ASP.NET y AngularJS.

Ahora digamos que hemos creado la API web, y en la aplicación AngularJS, necesitamos crear un servicio para trabajar con la API web. Esto se puede crear como se muestra en la lista a continuación:

MyApp.factory('TeacherService', ['$http', function ($http) {
    var urlBase = 'http://localhost:25221/api';
    var TeacherService = {};

    TeacherService.getSubjects = function () {
        return $http.get(urlBase + '/Subjects');
    };
}]);

A continuación, en el controlador, debemos usar el servicio AngularJS para obtener los datos de la API web.  Pasamos TeacherService como dependencia y luego llamamos a la función getSubjects() del servicio para obtener los datos de la API web.

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;
 
            });
    };
});

De esta manera, podemos obtener fácilmente datos de la base de datos y vincularlos al menú desplegable de arranque en una aplicación Angular. Espero que este post te haya resultado útil. ¡Gracias por leer!