AngularJSでブートストラップドロップダウンを操作する方法は?

この投稿では、AngularJS APPのBootstrapドロップダウンを使用して、最高のAngularコンポーネントライブラリの1つを使用して作業する方法を学習します。

Dhananjay Kumar Last Updated Feb 19, 2025 5min read

この投稿では、AngularJS APPのBootstrapドロップダウンを使用して、最高のAngularコンポーネントライブラリの1つを使用して作業する方法を学習します。

以下のリストに示すように、単純なブートストラップドロップダウンボタンを作成できます。

<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アプリケーションでブートストラップドロップダウンを作成する必要があると仮定しましょう。これを作成するには、まず、以下のリストに示すように、ブートストラップ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コントローラーを作成しましょう。コントローラーには、ブートストラップドロップダウンにバインドされる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");
    }
});

ドロップダウンの一般的な要件の 1 つは、アイテムを選択することです。他の方法があるかもしれませんが、次の手順で説明するように、簡単な方法で行うことを好みます。

コントローラーの$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>

Web API からのデータの取得

リアルタイムアプリケーションでは、データベースからデータを取り込み、UI にバインドする必要がある場合があります。データベースからデータを公開するには、さまざまな方法があります。最も一般的なアプローチの 1 つは、Web API の記述です。必要に応じて、ASP.NET Web API と AngularJS の操作に関するステップバイステップガイドを読むことをお勧めします。

ここで、Web API を作成し、AngularJS アプリケーションで Web API を操作するサービスを作成する必要があるとします。これは、次のリストに示すように作成できます。

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

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

次に、コントローラーで、AngularJS サービスを使用して Web API からデータをフェッチする必要があります。依存関係として TeacherService を渡し、サービスの getSubjects() 関数を呼び出して Web 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アプリケーションのブートストラップドロップダウンにバインドできます。この記事がお役に立てば幸いです。読んでくれてありがとう!

操作方法

AngularJSでブートストラップドロップダウンを操作する方法は?

Bootstrap Dropdown

AngularJSコントローラーデータを使用したブートストラップドロップダウン

ドロップダウンで項目を選択する

Web API からのデータの取得