AngularJS isArray() is one of the useful ng function. This function is used to identify if a reference is array or not. This function return Boolean which means , it will return true if the reference is an array, return […]
Dependent Dropdown List with AngularJS
Here the simple AngularJS tutorial on creating Cascading DropDownList with Angular JS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script> function CountryController($scope) { $scope.countries = { 'India': { 'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'], 'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'], }, 'USA': { 'San Francisco': ['SOMA', 'Richmond', 'Sunset'], 'Los Angeles': ['Burbank', 'Hollywood'] }, 'Australia': { 'New South Wales': ['Sydney','Orange','Broken Hill'], 'Victoria': ['Benalla','Melbourne'] } }; } </script> </head> <body> <div ng-app class="container"> <div ng-controller="CountryController"> <div class="form-group"> <label class="control-label" for="Country">Country:</label> <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries"> <option value=''>Select</option> </select> </div> <div class="form-group"> <label class="control-label" for="States">States:</label> <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states"> <option value=''>Select</option> </select> </div> <div class="form-group"> <label class="control-label" for="City">City:</label> <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities"> <option value=''>Select</option> </select> </div> </div> </div> </body> </html> |
How to assign alternate class to rows in Angular JS?
In this post i would like to write about Angular JS ngClassOdd,ngClassEven directives , by using this directories we can take effect only on odd rows or on even rows. This directives work exactly as ngClass and this directives […]
Custom filters in AngularJS
This tutorial will show you, creating your own custom filters in AngularJS with simple steps and example. Angular filters provides a way to format the variable output without changing scope variable. Whenever possible […]
AngularJS and Codeigniter : Retrieve data from the database
Here I would will like to show you how to use Angular JS in CodeIgniter and I will show you how to get data from the database in Codigniter using Angular JS. view : angularjs_view.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Arjunphp.com</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script type="text/javascript"> function userController($scope,$http) { $scope.users = []; $http.get('<?php echo site_url('angularjs/get_list'); ?>').success(function($data){ $scope.users=$data; }); } </script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body ng-app> <!-- ng-app : which tells the Angular framework to parse data from this div --> <div class="container"> <div class="col-lg-12 col-md-12"> <table ng-controller="userController" class="table table-bordered table-condensed table-responsive"> <thead> <tr> <td>S.no.</td> <td>Email</td> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td>{{user.id}}</td> <td>{{user.email}}</td> </tr> </tbody> </table> </div> </div> </body> </html> |
