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>
    </ul>
    </div>
    </div>

    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
    Hi

    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;
    })[0].Name;
    $window.alert("Selected Value: " + fruitId + "\nSelected Text: " + fruitName);
    }
    });
    </script>




    sample Code text with label


    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>

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

    </div>

    </body>
    </html>




    Refer Below link


    "aspsnippets.com/Articles/AngularJS-Get-selected-Text-and-Value-of-HTML-Select-DropDownList-on-Button-click-using-ng-click.aspx"

    Name : Dotnet Developer-2015
    Email Id :kumaraspcode2009@gmail.com

    '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"
    ng-model="selectedCountry">
    </select>
    <script>
    var app = angular.module("myApp", []);
    app.controller("myCntrl", function ($scope, $http) {
    $scope.CountryList;
    $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;
    alert("Completed.");
    })
    };
    $scope.changeevt = function () {
    alert("Country Name: " + $scope.selectedCountry.CountryName + "\nCountryID: " + $scope.selectedCountry.CountryID);
    };
    });
    </script>
    </div>

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


Sign In to post your comments