Como trabalhar com o Bootstrap DropDown no AngularJS?

Neste post, aprenderemos como trabalhar com o menu suspenso Bootstrap em um aplicativo AngularJS com a ajuda de uma das melhores bibliotecas de componentes Angular disponíveis.

Bootstrap Dropdown

Um botão suspenso de bootstrap simples pode ser criado, conforme mostrado na lista abaixo:

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

No menu suspenso que criamos acima, seremos direcionados para outra visualização ou página ao selecionar um item e todos os itens são codificados no menu suspenso.

Lista suspensa de inicialização com dados do controlador AngularJS

Agora vamos supor que precisamos criar um menu suspenso de bootstrap no aplicativo AngularJS. Para criar isso, primeiro precisamos ter certeza de que a referência do CSS de bootstrap é adicionada ao projeto, conforme mostrado na listagem abaixo:

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

Em seguida, vamos criar o controlador AngularJS. No controlador, há uma matriz chamada subjects que será vinculada ao menu suspenso de bootstrap. O controlador pode ser criado conforme mostrado na lista abaixo:

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

Podemos vincular a matriz de assuntos para criar uma lista suspensa, conforme mostrado na lista abaixo:

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

Aqui, estamos fazendo as seguintes tarefas para vincular a matriz do controlador AngularJS na lista suspensa de bootstrap:

1. Definindo o valor ng-controller como o SubjectDropDownController
2. Usando a diretiva ng-repeat no elemento li para repetir os elementos da matriz

No menu suspenso acima, todos os itens são links para os quais navegaremos clicando neles. Para invocar uma função de controlador no clique do item suspenso, precisamos usar a diretiva ng-click, conforme mostrado na listagem abaixo:

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

No controlador, precisamos criar uma função conforme mostrado na lista abaixo:

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

Selecionando um item no menu suspenso

Um requisito comum no menu suspenso seria selecionar um item. Pode haver outras maneiras de fazer isso, mas prefiro fazê-lo de maneira simples, conforme discutido nas etapas a seguir:

1. Crie uma variável no $scope no controlador. Digamos que o nome da variável seja selecteditem
2. Na diretiva ng-click, chame uma função e passe o item na função
3. Atribuir o item que é passado como parâmetro na função à variável selecteditem
4. Data bind the drop-down display item to the selecteditem variable

O controlador pode ser modificado conforme mostrado na lista abaixo:

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

E o menu suspenso pode ser modificado para vincular o item selecionado, conforme mostrado na listagem abaixo:

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

Obtendo dados da API Web

Em aplicativos em tempo real, talvez seja necessário trazer dados do banco de dados e associá-los à interface do usuário. Existem várias maneiras de expor dados do banco de dados. Uma das abordagens mais populares é escrever a API Web.  Se necessário, talvez você queira ler Um guia passo a passo para trabalhar com a API Web do ASP.NET e o AngularJS.

Agora, digamos que criamos a API Web e, no aplicativo AngularJS, precisamos criar um serviço para trabalhar com a API Web. Isso pode ser criado conforme mostrado na lista abaixo:

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

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

Em seguida, no controlador, precisamos usar o serviço AngularJS para buscar os dados da API Web.  Passamos TeacherService como a dependência e, em seguida, chamamos a função getSubjects() do serviço para buscar os dados da 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;
 
            });
    };
});

Dessa forma, podemos facilmente buscar dados do banco de dados e vinculá-los ao menu suspenso de inicialização em um aplicativo Angular. Espero que você tenha achado este post útil. Obrigado por ler!