Set Button Text on Bootstrap DropDown menu item click in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Oct 24, 2019 02:52 AM
Forum: AngularJS
Answer: 1
Views: 3649
Sample Code: Download

How to change the value of button on click of a dropdown list using angularjs

<div class="btn-group" style="margin-top:52px">
    <button type="button" ng-model="dropdown" class="btn btn-primary">{{ddn}}</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
    <div class="dropdown-menu" ng-repeat="ddl in ddList">
        <a class="dropdown-item" ng-click="changeValue(parameter)" href="#">{{ddList[0].Parameter}}</a>
        <a class="dropdown-item" ng-click="changeValue(parameter)" href="#">{{ddList[1].Parameter}}</a>
        <a class="dropdown-item" ng-click="changeValue(parameter)" href="#">{{ddList[2].Parameter}}</a>
    </div>
</div>

    $scope.ddList = null;
    $http.get(apiUrl + "/api/Warehouse/getDropdownList")
    .then(function (response) {
       $scope.ddList = JSON.parse(response.data);
       $scope.parameter = $scope.ddList[0].Parameter;
    })

    $scope.ddn = null;
    $scope.changeValue = function (parameter) {
        $scope.ddn = $scope.parameter;
    }

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Oct 24, 2019 03:22 AM
Modified: on Oct 25, 2019 01:29 AM
Report

Hi skp,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope) {
            $scope.ddList = [{ "Parameter": "M" }, { "Parameter": "W" }, { "Parameter": "D" }];
            $scope.changeValue = function (parameter) {
                $scope.ddn = parameter;
            }
        });        
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="btn-group" style="margin-top: 10px">
        <button type="button" ng-model="dropdown" class="btn btn-primary dropdown-toggle">
            {{ddn}}</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
            data-toggle="dropdown">
            &nbsp;<span class="caret"></span>
        </button>
        <div class="dropdown-menu">
            <div ng-repeat="ddl in ddList" style="margin-left: 20px">
                <a class="dropdown-item" ng-click="changeValue(ddl.Parameter)" href="#">{{ddl.Parameter}}</a>
            </div>
        </div>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Set Button Text on Bootstrap DropDown menu item click in AngularJS

Company

Explore

Follow us

Contact Us