Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to show select box using the Angular JS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 678
    Comment on it

     

    Hello Reader's if you are new to Angular JS then this blog is helpful to you. In this blog you can see how angular js can be used to generate the html. AngularJS enables you to create selectbox based on items in an array, or an object. So for this function we will be using  the ng-optiondirective. So lets start this:

     

    First create html file name it to angular.html

    Then in the header section call the js file of angular with the syntax as follows:-

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <!DOCTYPE html>
    <html>
    <body>
    
    <div ng-app="myApp" ng-controller="myCtrl">
    
    <select ng-model="selectBranch" ng-options="x for x in names">
    </select>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.names = ["Computer Science", "Information Technology", "Mechanical Engineering"];
    });
    </script>
    
    <p>You can see the output box is generated above </p>
    
    </body>
    </html>
    


    On the code above you can see all the objects written in $scope.name will be inserted as options in select box. Because the ng-repeat directive create and copy the special code syntax for html for every objects in the array, And now you can use them as to create options for select box, but the ng-options directive was made especially for filling a dropdown list with options.

    Now remember the options inside the select box will be generated by ng-options which will be allowed as object, But the options generated by ng-repeat will be allowed as string.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: