Posts
33
Comments
186
Trackbacks
0
Angular JS - adding Options dynamically to Select drop down box
You can create options elements of <select> dynamically using Angular.

An example of it with various options like grouping options or disabling few are also available.

<html>
  <head>
    <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script type="text/javascript">
  angular.module("app", []).controller("myController", ["$scope", function($scope) {

    $scope.OptionArray = [{
      text: "Mumbai",
      id: 1,
      Country: "India"
    }, {
      text: "London",
      id: 1,
      Country: "UK"
    }, {
      text: "Perth",
      id: 1,
      Country: "Australia"
    }, ]

    $scope.optionSelectedOne = 2;
  }]);
    </script>
  </head>

  <body ng-app="app" ng-controller="myController">

      <select ng-model="optionSelectedOne" ng-options="obj.id as obj.text group by obj.Country disable when obj.Country == 'Australia' for obj in OptionArray">
      <option value="">Please Select Country</option>
    </select>
  </body>

</html>

The output of this would look like the following  - 


posted on Sunday, June 14, 2015 3:31 PM Print
Comments
Gravatar
# obat nyeri sendi terbaik
frenkys
7/18/2016 8:42 AM
Thank you for the article was very helpful, I liked his discussion and hopefully a lot of other people who may read this article.
Gravatar
# bigo live app
bigo live login
6/7/2017 9:35 AM
BigoLive is a social tool that lets you connect with people through live videos.
bigo live app
Gravatar
# re: Angular JS - adding Options dynamically to Select drop down box
helenolin1
10/27/2017 12:25 PM
Much knows about the subject! It supports two-way data binding i.e. connects your HTML views to your JavaScript objects models seamlessly. axion laminate flooring
Gravatar
# re: Angular JS - adding Options dynamically to Select drop down box
uxbridge
2/7/2018 5:21 PM
I was reading the provided article with a great interest! uxbridge-escorts.com

Post Comment

Title *
Name *
Email
Comment *  
Verification