<!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="mymodule" ng-controller="mycontroller"> <table> <tr> <td>firstname</td> <td> <input type="text" ng-model="employee.firstname"/> </td> </tr> <tr> <td>lastname</td> <td> <input type="text" ng-model="employee.lastname"/> </td> </tr> <tr> <td>age</td> <td> <input type="text" ng-model="employee.age"/> </td> </tr> <tr> <td>firstname</td> <td> {{employee.firstname}} </td> </tr> <tr> <td>lastname</td> <td> {{employee.lastname}} </td> </tr> <tr> <td>age</td> <td> {{employee.age}} </td> </tr> </table> </div> <script> var myapp = angular.module("mymodule", []); myapp.controller("mycontroller", function($scope) { var employee={ firstname:'david', lastname:'hastings', age:26 }; $scope.employee=employee; }); </script> </body> </html>
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"> $('.cat').click(function(){ $('rat').css("color","red"); }); </script> </head> <body> <div class="rat"> <h2>hello</h2> </div> <button class="cat"> hello </button> </body> </html>
<!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="Rizwan<html> <head> <title>Line Break Example</title> </head> <body> <p>Hello You delivered your assignment ontime Thanks Mahnaz</p> </body> </html>" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
<!doctype html> <html ng-app> <head> <title> document ojet mode </title> <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>
<!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" ng-change="yourName = (yourName | uppercase)"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
<!doctype html> <html ng-app="demo"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <script> var app = angular.module("demo",[]); app.controller("firstctrl",function($scope){ $scope.modelname = "test"; }); app.controller("secctrl",function($scope){ }); </script> </head> <body> <DIV Ng-controller="firstctrl">{{modelname}}</DIV> <div ng-controller="secctrl">data</div> </body> </html>
<!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>Your name: </label> <input type="text" ng-model="name" placeholder="Ener your name here!!"> <h1>Hello {{name}}</h1> </div> </body> </html>
<!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/javascript"> function TodoCtrl($scope) { $scope.total = function () { return $scope.onpe*2 + $scope.once*7; }; </script> </head> <body> <div> <label>strikeprice:</label> <input type="number" ng-model="strikeprice" placeholder="90"> <input type="number" ng-model="stage" placeholder="2.5"> <hr> <div ng-app="" ng-init="st=1"> <h1>values </h1> <div> <table> <tr> <td>{{ strikeprice -stage }}CE: <input type="number" ng-model="onedownce"></td> <td> {{ strikeprice - stage }}PE: <input type="number" ng-model="onedownpe"> </td> </tr> <tr> <td> {{ strikeprice}}CE: <input type="number" ng-model="once"> </td> <td> {{ strikeprice}}PE: <input type="number" ng-model="onpe"> </td> </tr> <tr> <td> {{ strikeprice +stage }}CE: <input type="number" ng-model="oneupce"> </td> <td> {{ strikeprice + stage }}PE: <input type="number" ng-model="oneuppe"> </td> </tr> </table> <table> <tr> <td>{{strikeprice}} close:</td> <td>{{once+onpe}}</td> </tr> <tr> <td>{{strikeprice-stage}} close:</td> <td>{{once+onpe-2.5}}</td> </tr> <tr> <td>{{strikeprice+stage}} close:</td> <td>{{once+onpe-2.5}}</td> </tr> </table> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app="myApp" > <div ng-controller="searchCtrl" > <p>Search Repository: <input type="text" ng-model="searchKey" ng-keyup="$event.keyCode == 13 && onClickSearch()"></p> <button ng-click="onClickSearch()">Search</button> <br> We'll search for: {{ key }} <br> <h3>Search Results: {{search}}</h3> Found: {{isEmptyTxt}} items <ul> <li ng-repeat="x in searchResults"> <b> Name: </b> {{ x.name }} <br> <b> Full Name: </b> {{ x.full_name }}<br> <b> Avatar: </b> {{ x.owner.avatar_url }} <br> <button type="submit" ng-click="saveBookmark(x.full_name)" class="btn btn-success"> <i class="icon-plus icon-white"></i> + Add</button> <!-- <button-bookmark></button-bookmark> <b> !!!! add bookmark button </b>--> </li> </ul> </div> <script> var txtSearchUrl ="https://api.github.com/search/repositories?q="; var txtSearch =""; var app = angular.module('myApp', []); app.controller('searchCtrl', function($scope, $http) { $scope.onClickSearch = function() { txtSearch = txtSearchUrl+$scope.searchKey; $scope.key = txtSearch; //txtSearch = $scope.searchKey; // app.controller('searchCtrl', function($scope, $http) { $http.get(txtSearch).then(function (response) { $scope.isEmptyTxt = ""+ response.data.items.length; $scope.searchResults = response.data.items; }); // }); $scope.saveBookmark = function(fullRepositoryName) { alert(fullRepositoryName); } }; }); /*app.controller('searchCtrl', function($scope, $http) { $http.get(txtSearch).then(function (response) { $scope.myData = response.data.items; }); });*/ </script> </body> </html>
<!doctype html> <html ng-app="myAap" ng-controller="mainController"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> </head> <body> <depend-dropdown module-name="country" depend-module="city"></depend-dropdown> <depend-dropdown module-name="city"></depend-dropdown> <script> var aap = angular.module('myAap' , []); aap.controller('mainController' , function($scope){ $scope.country = { 'label' : 'Country', 'valueArr' : {'India' : 1 , 'Usa' : 2 , 'Aus' : 3}, 'selectVal' : '' }; $scope.city = { 'label' : 'City', 'valueArr' : {}, 'selectVal' : '' }; }); aap.directive('dependDropdown' , function(){ return{ restrict : 'E', template : '<div><label>{{moduleName.label}} : </label><select ng-options="x for (x,y) in moduleName.valueArr" ng-model="moduleName.selectVal" ng-change="changeDropdown()"><option value="">---Please select---</option></select></div><br><br>', scope : { moduleName : '=', dependModule : '=' }, controller : 'dependableController' }; }); aap.controller('dependableController' , function($scope){ $scope.changeDropdown = function(){ var dependData = { 1 : {'Mumbai' : 1 , 'Pune' : 2 , 'Kolkata' : 3}, 2 : {'LA' : 4 , 'Boston' : 5 , 'Cicago' : 6}, 3 : {'Sydney' : 7 , 'Perth' : 8 , 'Hobert' : 9} }; $scope.dependModule.valueArr = dependData[$scope.moduleName.selectVal]; }; }); </script> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
