AngularJS Directives | JavaScript Learning

Legacy framework warning: AngularJS support officially ended in January 2022. This example is preserved to explain the uploaded course material, not recommended for new projects. Internet access is required to load AngularJS from the CDN. Official AngularJS site.

1. Two-way binding: ng-model / Two-way binding

Name / नाम

Hello {{ name || "Guest" }}!

ng-bind output:

2. ng-init and ng-repeat / List बनाना

{{ person }}

3. ng-click / Button click

Count: {{ count }}

4. Total price / कुल कीमत

Quantity / मात्रा

Price / कीमत

Total: {{ (qty || 0) * (price || 0) | number:2 }}

Corrected source / सुधारा गया source

<div ng-app="directiveDemo" ng-controller="DemoController">
  <input ng-model="name">
  <p>Hello {{ name }}!</p>
  <li ng-repeat="person in people">{{ person }}</li>
  <button ng-click="count = count + 1">Add</button>
</div>

English: ng-model connects input and model data; ng-bind displays an expression; ng-repeat repeats an element for each list item; ng-click evaluates an expression when clicked.

हिंदी: ng-model input और model data को जोड़ता है; ng-bind expression दिखाता है; ng-repeat list के प्रत्येक item के लिए element दोहराता है; ng-click button click पर expression चलाता है।

← All additional practicals