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

Online AngularJS Editor

<!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 ng-init="names = [{name:'vamshi',city:'hyderabad'},{name:'krishna',city:'secunderabad'},{name:'aman',city:'mumbai'}]">
      <label>Name:</label>

    <input type="text" ng-model="logName" placeholder="Enter your name here!"/>
    <h1>Hello {{logName}}!</h1><br>
    <h2>The results will filter as you type</h2>
    <li ng-repeat="person in names |orderBy : 'name'| filter: logName">{{person.name}} -- {{person.city}}</li>
    </div>
  </body>
</html>

fligh

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
      <h2>Flight Search Engine</h2>
  <hr>
      <br>
      <section class="col col1 sidebar">
<ul class="tabs group">
        <li ng-click="roundTrip=false;"><a href="#box-one" ng-class="{'highlight':!roundTrip}">One Way</a></li>
        <li ng-click="roundTrip=true;"><a href="#box-two" ng-class="{'highlight':roundTrip}">Two Way</a></li>
      </ul>
      <br>
      <form>
          <input type="text" ng-model="City" placeholder="City"/> <br>
         <br> <input type="text" ng-model="Des City" placeholder="D City"/>
         <br> 
         
<br>

<select name="singleSelect" ng-model="data.singleSelect">
      <option value="Departure Dat">Departure date</option>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
    </select>
<br><br>
<select name="singleSelect" ng-model="data.singleSelect">
      <option value="Departure Dat">Return date</option>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
    </select>
<br><br>
<select name="singleSelect" ng-model="data.singleSelect">
      <option value="Departure Dat">Passenger</option>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
    </select>
<br>
<br>
<button ng-click="">Search</button>
      </form>
    </section>
  </body>
</html>

validateDouble

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script>
        var validateDouble = function validate( evt ) {
            var theEvent = evt || window.event;
            
            // Handle paste
            if (theEvent.type === 'paste') {
                 key = event.clipboardData.getData('text/plain');
            } else {
            // Handle key press
                 var key = theEvent.keyCode || theEvent.which;
                 key = String.fromCharCode(key);
            }
            var curValue = theEvent.target.value;
            var regex = curValue && curValue.indexOf( '.' ) >= 0 ? /[0-9]/ : /[0-9]|\./;
            if( !regex.test(key) ) {
                 theEvent.returnValue = false;
                if(theEvent.preventDefault) theEvent.preventDefault();
            }
        };
    
    document.addEventListener("DOMContentLoaded", function(event) { 
        let input = document.getElementById("input1");
        input.setAttribute( 'onkeypress', 'validateDouble(event)' ); 
        input.setAttribute( 'onpaste', 'validateDouble(event)' );    
    });

    </script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" id="input1" ng-model="yourName" placeholder="Enter a double">
    </div>
  </body>
</html>

validateDouble

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script>
        validateDouble = function validate( evt ) {
            var theEvent = evt || window.event;
                    console.log('double', theEvent);
    
            // Handle paste
            if (theEvent.type === 'paste') {
                key = event.clipboardData.getData('text/plain');
                    console.log('paste', key);
            } else {
            // Handle key press
                var key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode(key);
                    console.log('press', key);
            }
            var curValue = theEvent.target.value;
            var regex = curValue && curValue.indexOf( '.' ) >= 0 ? /[0-9]/ : /[0-9]|\./;
            if( !regex.test(key) ) {
                theEvent.returnValue = false;
                if(theEvent.preventDefault) theEvent.preventDefault();
            }
        };
    
    document.addEventListener("DOMContentLoaded", function(event) { 
        let input = document.getElementById("input1");
        input.setAttribute( 'onkeypress', 'validateDouble(event)' );    
    });

    </script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" id="input1" ng-model="yourName" placeholder="Enter a double">
    </div>
  </body>
</html>

Online AngularJS Editor

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script type="text/css">
    *{
    margin:0;
    padding:0;
    }

body{
    font:15px/1.3 'Open Sans', sans-serif;
    color: #5e5b64;
    text-align:center;
}

a, a:visited {
    outline:none;
    color:#389dc1;
}

a:hover{
    text-decoration:none;
}

section, footer, header, aside, nav{
    display: block;
}

/*-------------------------
    The menu
--------------------------*/

nav{
    display:inline-block;
    margin:60px auto 45px;
    background-color:#5597b4;
    box-shadow:0 1px 1px #ccc;
    border-radius:2px;
}

nav a{
    display:inline-block;
    padding: 18px 30px;
    color:#fff !important;
    font-weight:bold;
    font-size:16px;
    text-decoration:none !important;
    line-height:1;
    text-transform: uppercase;
    background-color:transparent;

    -webkit-transition:background-color 0.25s;
    -moz-transition:background-color 0.25s;
    transition:background-color 0.25s;
}

nav a:first-child{
    border-radius:2px 0 0 2px;
}

nav a:last-child{
    border-radius:0 2px 2px 0;
}

nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
    background-color:#e35885;
}

p{
    font-size:22px;
    font-weight:bold;
    color:#7d9098;
}

p b{
    color:#ffffff;
    display:inline-block;
    padding:5px 10px;
    background-color:#c4d7e0;
    border-radius:2px;
    text-transform:uppercase;
    font-size:18px;
}
        
    </script>
  </head>
  <body>
    <div id="main" np-app>
        
    <nav  class="{{active}}" ng-click="$event.preventDefault()">
        <a href="#" class="home" ng-click="active='home'">Home</a>
    </nav>
    
    <p ng-hide="active">Plz Click Menu item</p>
    <p ng-show="active">Your Chose<b>{{active}}</b></p>
     
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

45655

<!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

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <div ng-init ="myfavlang=[{name:'PHP',extension:'.php'},{name:'javascript',extension:'.js'},{name:'Ruby',extension:'.rbb'},{name:'C++',extension:'.cpp'}]"></div>
      <p ng-repeat="lang in myfavlang">
          Name: {{lang.name}}<br>
          extension: {{lang.extension}}<br>
      </p>
    </div>
  </body>
</html>

ng-repeat Sample

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <div ng-init ="myfavlang=[{name:'PHP',extension:'.php'},{name:'javascript',extension:'.js'},{name:'Ruby',extension:'.rbb'},{name:'C++',extension:'.cpp'}]"></div>
      <p ng-repeat="lang in myfavlang">
          Name: {{lang.name}}<br>
          extension: {{lang.extension}}<br>
      </p>
    </div>
  </body>
</html>

Online AngularJS Editor

<!doctype html>
<html>
   
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
    <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
           // $scope.helloTo = {};
            $scope.title = "AngularJS";
         });
      </script>
   </head>
   
   <body ng-app = "myapp">
      
      <div ng-controller = "HelloController" >
         <h2>Welcome {{title}} to the world of Tutorialspoint!</h2>
      </div>
   </body>
</html>

Online AngularJS Editor

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script>
        
    factory('Excel',function($window){
		var uri='data:application/vnd.ms-excel;base64,',
			template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="https://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
			base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
			format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
		return {
			tableToExcel:function(tableId,worksheetName){
				var table=$(tableId),
					ctx={worksheet:worksheetName,table:table.html()},
					href=uri+base64(format(template,ctx));
				return href;
			}
		};
	})
	function MyCtrl(Excel,$timeout){
	  $scope.exportToExcel=function(tableId){ // ex: '#my-table'
			$scope.exportHref=Excel.tableToExcel(tableId,'sheet name');
			$timeout(function(){location.href=$scope.fileData.exportHref;},100); // trigger download
		}
	}
    </script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
      <button class="btn btn-link" ng-click="exportToExcel('#table1')">
		<span class="glyphicon glyphicon-share"></span> Export to Excel
	</button>
    </div>
  </body>
</html>

Advertisements
Loading...

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