Angular Directives

AIM: Write Angular code that illustrate the following directives:

  1. ng-init
  2. ng-repeat
  3. ng-model
ng-init
<!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-init Output
ng-repeat
<!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-repeat Output
ng-model
<!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 &nbsp; &nbsp;
    <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>
ng-model Output
Posted by