Skip to main content

Angular Js Examples codes

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
<!--Example 1 -->
 <div ng-app="" ng-controller="personController">
 First Name: <input type="text" ng-model="firstName"><br>
 Last Name: <input type="text" ng-model="lastName"><br>
 <br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
function personController($scope) {
    $scope.firstName = "";
    $scope.lastName = "";
}
</script>

<!--Example 2 -->
<div ng-app="">
first expression {{5*6}}
</div>

<!--Example 3 -->
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>

<!--Example 4 -->
<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

<!--Example 5 -->
 <div ng-app="" ng-init="quantity=67;cost=3">
 <p>Total in dollar: {{ quantity * cost }}</p>
</div>

<!--Example 6 -->
 <div ng-app="" ng-init="first='chinna';last='ram'">
 <p>Total in dollar: {{ first +""+last }}</p>
 </div>

<!--Example 7 -->
 <div ng-app="" ng-init="person={first_name:'John',lastName:'Doe'}">
 <p>The name is {{ person.first_name }}</p>
 </div>

<!--Example 8 -->
 <div ng-app="" ng-init="points=[1,15,19,2,40]">
 <p>The points are {{ points[0] }}</p>
 </div>

<!--Example 9th -->
 <div ng-app="" ng-init="firstName='John'">
 <p>Name: <input type="text" ng-model="firstName"></p>
 <p>You wrote: {{ firstName }}</p>
</div>

<!--Example 10th -->
 <div ng-app="" ng-init="quantity=1;price=5">
 Quantity: <input type="number"    ng-model="quantity">
 Costs:    <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>

<!--Example 11th -->
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
<div>

<!--Example 12th -->
 <div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<!--Example 13th -->
 <div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
}
</script>

<!--Example 14th -->
 <div ng-app="" ng-controller="personController">
<input type="text" ng-model="lastname">

<p>The name is {{ lastname | uppercase }}</p>
<p>The name is {{ lastname | lowercase }}</p>
<p>The name is {{ lastname | filter }}</p>
<p>The name is {{ lastname | uppercase }}</p>

</div>
<script>
function personController($scope) {
    $scope.lastname = "chinna",
    $scope.fullName = function() {
        return $scope.firstName;
    }
}
</script>


<!--Example 15th -->
<div ng-app="" ng-controller="costController">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
<script>
function costController($scope){
    $scope.quantity = 1.2
    $scope.price = 1.1
}

</script>

<!--Example 16th -->
 <div ng-app="" ng-controller="namesController">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

<!--Example 17th -->
 <div ng-app="" ng-controller="customersController">

<ul>
  <li ng-repeat="x in names">
   Name is  {{ x.Name }},City is {{x.City}},Country is {{x.Country }}
  </li>
</ul>
</div>

<script>
function customersController($scope,$http) {
    $http.get("http://www.w3schools.com/website/Customers_JSON.php")
    .success(function(response) {$scope.names = response;});

}
</script>

<!--Example 18th -->
 <div ng-app="" ng-controller="customersController">

<table>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
function customersController($scope,$http) {
  $http.get("http://www.w3schools.com/website/Customers_JSON.php")
  .success(function(response) {$scope.names = response;});
}
</script>

 <style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

<!--Example 19th -->
<div ng-app="" ng-controller="customersController">
<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
<script>
function customersController($scope,$http) {
  $http.get("http://www.w3schools.com/website/Customers_JSON.php")
  .success(function(response) {$scope.names = response;});
}
</script>

<!--Example 20th -->
<div ng-app="" ng-controller="customersController">
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>

<script>
function customersController($scope,$http) {
    var site = "http://www.w3schools.com";
    var page = "/website/Customers_MySQL.php";
    $http.get(site + page)
    .success(function(response) {$scope.names = response;});
}
</script>

<!--Example 21st -->
 <div ng-app="">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
{{ mySwitch }}
</div>

<!--Example 22nd -->
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>

<!--Example 23rd -->
<div ng-app=""  ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>

<!--Example 24th -->
<div ng-app="">
<p ng-hide="true">I am not visible.</p>
<p ng-hide="false">I am visible.</p>
</div> 

<!--Example 25th -->
<div ng-app="" ng-controller="myController">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
function myController($scope)
{
$scope.count = 0   
}
</script>

<!--Example 26th -->
<div ng-app="" ng-controller="personController">
<button ng-click="toggle()">Toggle</button>
<p ng-hide="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>

<script>
function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}
</script>
<!--Example 27th -->
 <div ng-app="" ng-controller="formController">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
function formController ($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
};
</script>
<!--Example 28th -->
 <!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body>
<h2>Validation Example</h2>

<form  ng-app=""  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
function validateCtrl($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
}
</script>

</body>
</html>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Error malloc(): memory corruption nginx with passenger?

Error malloc(): memory corruption nginx with passenger Passenger issue resolving steps :  sudo gem uninstall passenger(uninstall all passenger) sudo gem install passenger sudo passenger-install-nginx-module --auto --auto-download --prefix=/opt/nginx --extra-configure-flags=none Update nginx config file with new passenger version and restart the nginx
1 comment
Read more

Lazy loading in rails – Rails Feature

 Lazy loading in rails – Rails Feature ? Lazy loading in rails is the amazing feature provided with rails. In console you might have tried to examine how lazy loading in rails actually works. In this tutorial, we will learn about this Rails - Lazy loading feature with examples. What exactly is Lazy Loading? As the name suggests the data is loaded in lazy manner (Really!) i.e. Your database is queried only when data from the database is required for some kind of manipulation in code. You will get more of this after you read how-to of lazy loading below. How lazy loading works: Whenever you try to get some data from database, For example, users is the database table that you have. And you are querying database to get users having age less than 20. Then, you will write code like, result = User.where("age < 20") when above statement is executed, your database is not queries yet(because the resultant data is not required yet). When you execute following code, records = resu...
Post a Comment
Read more

Rails Migration Difference between Text and String

Rails Migration Difference between Text and String ? While working with Rails Migration Difference between Text and String is important to be known to every developer. Columns and their data types are finalized while deciding Table structure. This tutorial will help understand difference between String and Text column type and illustrate how to write Rails Migration implementing the same. You might want to read about database.yml files for specifying database configuration for Rails Application. 1. Concepts When String or Text data type is required?     Whenever you require your column to store information which is lengthy in size (Many characters), you need to consider String or Text data type for the column.     Both of them let you store Many(How Many - will see later) characters Difference between String and Text Considering MySQL database Feature     String     Text Length     1 to 255     ...
Post a Comment
Read more