Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

ccddccdc

angularjs 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

fdfd

angularjs 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  <div ng-mouseover="open = true" ng-mouseleave="open = false">
    To display button mouseover here!!!
 <button class="btn btn-primary" type="button" ng-show="open"   >
        <i class="fa fa-plus">Button</i>
 </button>
    </div>
   
</div>

login.html

angularjs 

<!doctype html>
<html ng-app = "Registration" >
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>First Name:</label>
      <input type="text" ng-model="First Name" placeholder="Enter a first name here">
      <hr>
       <label>Last Name:</label>
      <input type="text" ng-model="Last Name" placeholder="Enter a last name here">
      <hr>
       <label>Email_Id:</label>
      <input type="text" ng-model="Email_id" placeholder="Enter a your email here">
      <hr>
       <label>Password:</label>
      <input type="password" ng-model="Password" placeholder="Enter your password here">
      <hr>
       <label>Confirm Password:</label>
      <input type="password" ng-model="Confirm Password" placeholder="Confirm your password please">
      <hr>
     <div ng-controller="Submit">
         <button ng-click= "redirect()">Submit</button>
        <button ng-click= "cancel()">Cancel</button>
	</div>
	<script>
		var application =angular.module('Registration',[]);
		application.controller('Submit', function($scope)
		{
		    $scope.redirect = function(){
            window.location = "#/login.html";
				
			};
			$scope.cancel = function(){
				$scope.register = 'Cancel';
			};
						
		});
	</script>
    
    </div>
  </body>
</html>

medzauthapp

angularjs 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

trialBtn.html

angularjs 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Online AngularJS Editor

angularjs 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

highlight first,middle,last with ng-class

angularjs 

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <script>
        var app = angular.module('testApp', []);
        app.controller('CtrlOne', ['$scope', function($scope){
            $scope.students = ["Tanveer","Ehtesham","Rizwan","Salman","Atif","Kashif"];
            $scope.dynamicClasses = "{ 'first': $first, 'middle': $middle, 'last': $last, 'odd':$odd, 'even':$even}";
        }])

    </script>
    <style>
        .first{
            color:green;
        }
        .middle{
            color:grey;
        }
        .last{
            color:red;
        }
    </style>
  </head>
  <body ng-app="testApp">
    <div ng-controller="CtrlOne">
        <p ng-repeat="student in students" ng-class="{{dynamicClasses}}">{{student}}</p>
    </div>
    
  </body>
</html>

printing object with ng-repeat

angularjs 

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <script>
        var app = angular.module('testApp', []);
        app.controller('CtrlOne', ['$scope', function($scope){
            $scope.employee = {name: 'Salman', age: 32};
        }])
        
    </script>
  </head>
  <body ng-app="testApp">
    <div ng-controller="CtrlOne">
        <p ng-repeat="(key, value) in employee">{{key}}, {{value}}</p>
    </div>
  </body>
</html>

Pre and post link in directive

angularjs 

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <script>
        var app = angular.module('testApp', []);
        app.controller('CtrlOne', ['$scope','studentSrvc', function($scope, studentSrvc){
            $scope.students = studentSrvc.all();
        }])
        app.controller('CtrlTwo', ['$scope','studentSrvc', function($scope, studentSrvc){
            $scope.students = studentSrvc.all();
        }])
        
        app.service('studentSrvc', function(){
            this.all = function (){
               return ["Tanveer", "Ehtesham", "Irfan"];
            }
        })
        
        app.directive('test', function(){
            return {
              compile: function(tElem, tAttrs){
                console.log('compile');
                return {
                  pre: function(scope, iElem, iAttrs){
                    console.log('pre link');
                  },
                  post: function(scope, iElem, iAttrs){
                    console.log('post link');
                  }
                }
              }
            }
        })
        
        
    </script>
  </head>
  <body ng-app="testApp">
    <div ng-controller="CtrlOne">
      <p ng-repeat="s in students">{{s}}</p>
      <hr>
    </div>
    <div ng-controller="CtrlTwo">
      <h4 ng-repeat="s in students">{{s}}</h4>
    </div>
    <div>
        <div test></div>
    </div>
  </body>
</html>

Online AngularJS Editor

angularjs 

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <script>
        var app = angular.module('testApp', []);
        app.controller('CtrlOne', ['$scope','studentSrvc', 'myDirective', function($scope, studentSrvc, myDirective){
            $scope.students = studentSrvc.all();
        }])
        app.controller('CtrlTwo', ['$scope','studentSrvc', function($scope, studentSrvc){
            $scope.students = studentSrvc.all();
        }])
        
        app.service('studentSrvc', function(){
            this.all = function (){
               return ["Tanveer", "Ehtesham", "Irfan"];
            }
        })
        
        app.directive('myDirective', function(){
            return {
              compile: function(tElem, tAttrs){
                console.log('compile => ' + tElem.html());
                return {
                  pre: function(scope, iElem, iAttrs){
                    alert('pre link => ' + iElem.html());
                  },
                  post: function(scope, iElem, iAttrs){
                    console.log('post link => ' + iElem.html());
                  }
                }
              }
            }
        })
        
        
    </script>
  </head>
  <body ng-app="testApp">
    <div ng-controller="CtrlOne">
      <p ng-repeat="s in students">{{s}}</p>
      <div myDirective></myDirective>
      <hr>
    </div>
    <div ng-controller="CtrlTwo">
      <h4 ng-repeat="s in students">{{s}}</h4>
    </div>
  </body>
</html>

Previous 1 ... 55 56 57 58 59 60 61 ... 64 Next
Advertisements
Loading...
img img img img img img

Follow

© Copyright 2019. All Rights Reserved.

Newsletter

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.