AIM: Write Angular code that illustrate the following directives:
- ng-init
- ng-repeat
- ng-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ngInit Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div ng-init="firstName='Govardhan'; lastName='Bhavani'"></div>
<p>My full name is {{ firstName + lastName }}</p>
</div>
</body>
</html>
ng-repeat<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ngInit Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div ng-init="firstName='Govardhan'; lastName='Bhavani'"></div>
<p>My full name is {{ firstName + lastName }}</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ngRepeat Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div ng-init="cars=[{company: 'Tata',model: 'Nexon',price: '7.9 Lakhs'},{company: 'Mahindra',model: 'XUV',price: '14.01 Lakhs'},{company: 'Maruti',model: 'Nexa',price: '11.56 Lakhs'}]"></div>
<h3>Cars List</h3>
<ul>
<li ng-repeat="car in cars">
{{ car.company+" "+car.model+" - "+car.price }}
</li>
</ul>
</div>
</body>
</html>
ng-model<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ngRepeat Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div ng-init="cars=[{company: 'Tata',model: 'Nexon',price: '7.9 Lakhs'},{company: 'Mahindra',model: 'XUV',price: '14.01 Lakhs'},{company: 'Maruti',model: 'Nexa',price: '11.56 Lakhs'}]"></div>
<h3>Cars List</h3>
<ul>
<li ng-repeat="car in cars">
{{ car.company+" "+car.model+" - "+car.price }}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ngModel Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="">
<form>
<input type="text" name="fullName" ng-model="regData.fullName" placeholder="Enter Full Name" /><br><br>
<input type="password" name="userPwd" ng-model="regData.userPwd" placeholder="Enter Password" /><br><br>
Gender :: <input type="radio" name="gender" ng-model="regData.gender" value="Male" /> Male
<input type="radio" name="gender" ng-model="regData.gender" value="Female" /> Female <br><br>
<select name="branch" ng-model="regData.branch">
<option value="">--Select Branch--</option>
<option value="Civil">Civil</option>
<option value="EEE">EEE</option>
<option value="Mechnical">Mech</option>
<option value="ECE">ECE</option>
<option value="CSE">CSE</option>
</select><br><br>
Language Known :: <input type="checkbox" name="lk" ng-model="regData.lk.C" /> C
<input type="checkbox" name="lk" ng-model="regData.lk.Java" /> Java
<input type="checkbox" name="lk" ng-model="regData.lk.Python" /> Python<br><br>
<textarea name="address" ng-model="regData.address" cols="30" rows="5"></textarea>
</form>
<h3>Preview Your Data</h3>
<label for="fullName"><b>Full Name</b> {{ regData.fullName }}</label><br>
<label for="userPwd"><b>Password</b> {{ regData.userPwd }}</label><br>
<label for="gender"><b>Gender</b> {{ regData.gender }}</label><br>
<label for="branch"><b>Branch</b> {{ regData.branch }}</label><br>
<label for="lk"><b>Languages Known</b> {{ regData.lk }}</label><br>
<label for="address"><b>Address</b> {{ regData.address }}</label><br>
<label for="formData"><b>Complete registration data</b><br> {{ regData }}</label>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ngModel Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="">
<form>
<input type="text" name="fullName" ng-model="regData.fullName" placeholder="Enter Full Name" /><br><br>
<input type="password" name="userPwd" ng-model="regData.userPwd" placeholder="Enter Password" /><br><br>
Gender :: <input type="radio" name="gender" ng-model="regData.gender" value="Male" /> Male
<input type="radio" name="gender" ng-model="regData.gender" value="Female" /> Female <br><br>
<select name="branch" ng-model="regData.branch">
<option value="">--Select Branch--</option>
<option value="Civil">Civil</option>
<option value="EEE">EEE</option>
<option value="Mechnical">Mech</option>
<option value="ECE">ECE</option>
<option value="CSE">CSE</option>
</select><br><br>
Language Known :: <input type="checkbox" name="lk" ng-model="regData.lk.C" /> C
<input type="checkbox" name="lk" ng-model="regData.lk.Java" /> Java
<input type="checkbox" name="lk" ng-model="regData.lk.Python" /> Python<br><br>
<textarea name="address" ng-model="regData.address" cols="30" rows="5"></textarea>
</form>
<h3>Preview Your Data</h3>
<label for="fullName"><b>Full Name</b> {{ regData.fullName }}</label><br>
<label for="userPwd"><b>Password</b> {{ regData.userPwd }}</label><br>
<label for="gender"><b>Gender</b> {{ regData.gender }}</label><br>
<label for="branch"><b>Branch</b> {{ regData.branch }}</label><br>
<label for="lk"><b>Languages Known</b> {{ regData.lk }}</label><br>
<label for="address"><b>Address</b> {{ regData.address }}</label><br>
<label for="formData"><b>Complete registration data</b><br> {{ regData }}</label>
</body>
</html>
No comments:
Post a Comment