You must Sign In to post a response.
  • Category: JQuery

    AngularJS dropdown with button and label

    I have code for button with label for dropdown.
    <div class="form-group col-xs-4">
    <div class="btn-group btn-input clearfix">
    <button id="yearModel" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle form-control"><span data-bind="label">Select Year</span> <span class="caret"></span></button>
    <ul id="yearModelList" class="dropdown-menu scrollable-menu">
    <li ng-repeat="model in models| unique:'year' | orderBy:['year']"><a href="" ng-click="ShowModels(model.year)">{{model.year}}</a></li>

    but the query is
    once click the dropdown it is showing list but when i select it is not selecting .
    it is showing select item only.
    Please suggest me ASAP.
  • #766761

    you can add this script in your html page

    <script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $window) {
    $scope.Fruits = [{
    Id: 1,
    Name: 'Apple'
    }, {
    Id: 2,
    Name: 'Mango'
    }, {
    Id: 3,
    Name: 'Orange'

    $scope.GetValue = function () {
    var fruitId = $scope.ddlFruits;
    var fruitName = $.grep($scope.Fruits, function (fruit) {
    return fruit.Id == fruitId;
    $window.alert("Selected Value: " + fruitId + "\nSelected Text: " + fruitName);

    sample Code text with label

    <script src=""></script>

    <div ng-app="">

    <p>Input something in the input box:</p>
    <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
    <h1>Hello {{name}}</h1>



    Refer Below link


    Name : Dotnet Developer-2015
    Email Id :

    'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

  • #766778
    use 'ng-change' attribute and 'ng-model' for details see below snippet
    here I have added countries in list box

    <div ng-app="myApp" ng-controller="myCntrl">
    <input type="button" id="btnFillCountries" value="Fill Country List" ng-click="fillCountryList()" />
    <br /><br />
    Country List :
    <select ng-change="changeevt()" ng-options="Country.CountryName for Country in CountryList"
    var app = angular.module("myApp", []);
    app.controller("myCntrl", function ($scope, $http) {
    $scope.fillCountryList = function () {
    var httpreq = {
    method: 'POST',
    url: 'Binddropdown.aspx/GetCountyList',
    headers: {
    'Content-Type': 'application/json; charset=utf-8',
    'dataType': 'json'
    data: {}
    $http(httpreq).success(function (response) {
    $scope.CountryList = response.d;
    $scope.changeevt = function () {
    alert("Country Name: " + $scope.selectedCountry.CountryName + "\nCountryID: " + $scope.selectedCountry.CountryID);

    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • Sign In to post your comments