Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

AngularJS Expressions

AngularJS expressions are used to bind application data to an HTML.

Syntax:

{{Expression}}

AngularJS Expression Basics

1. Expression is written inside two curly braces, it looks like JavaScript expressions or snippets.

2. Angular Expressions are different from JavaScript expressions but Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.

3. AngularJS Expressions behaves like ng-bind directives.

Example:

4. You can write AngularJS expressions inside a directive: ng-bind="xyz[2] ".

5. AngularJS executes expressions and return result for expression on same location.

Sample example using Expression:

  <div ng-app="myApp" ng-controller="MyTestController">
        First Name: <input type="text" ng-model="FirstName"><br><br>
        Last Name: <input type="text" ng-model="LastName"><br>
        <br>
        Full Name: {{FirstName+" "+ LastName}}
    </div>
 
    <script>
        var app = angular.module('myApp', []);
        app.controller('MyTestController', function ($scope) {
            $scope.FirstName = "Shourya";
            $scope.LastName = "Kendre";
        });
    </script>

 

Expression Examples with Numbers, Strings, Arrays, Objects, operators

1. Using String

Following example is a simple concatenation of two strings.

Full Name: {{FirstName+" "+ LastName}}   


Code Sample using ng-bind

Full Name:<p ng-bind="FirstName+' '+
LastName">


2. Using Numbers

In following example we performed some mathematical operation on two numbers.
    <div ng-app=""ng-init="NumberOne=5;NumberTwo=3">
        <p>Addition: {{ NumberOne +NumberTwo }}</p>
        <p>Subtraction: {{NumberOne - NumberTwo }}</p>
         Multiplication: <p ng-bind="NumberOne * NumberTwo"></p>
    </div>


3. Using Arrays

In following example we performed some mathematical operation on number array values and in another example displays employee details using string array.

Integer or numbers Array

<div ng-app="" ng-init="NumbersData=[1,12,20,2,40]">
 
        <p>Addition: {{ NumbersData[1] + NumbersData[2] }}</p>
        <p>Subtraction: {{ NumbersData[4] - NumberTwo[2] }}</p>
        Third Number: <p ng-bind="NumbersData[3]"></p>
    </div>

String arrays:

  <div ng-app="" data-ng-init="names=[{name:'Nagnath',surname:'Kendre',city:'Pune'},{name:'Satish',surname:'Lomte',city:'London'},{name:'sharad',surname:'Sangle',city:'Mumbai'}]">
        <ul>
            <li data-ng-repeat="myObject in names">{{myObject.name}} {{myObject.surname}} - {{myObject.city}}</li>
        </ul>
    </div>

 

4. Using Objects:

Following example displays user details using person object.
    <div ng-app="" ng-init="person={firstName:'Nagnath',lastName:'Kendre',City:'Pune'}">
        <p>Name: {{person.firstName}} {{person.lastName}} Location: {{person.City}}</p>
    </div>


5. Using Ternary operator:

It has two operators, the? (Question mark) and: (Colon), which separates the condition from the result.

Syntax:

Condition ? first_expression : second_expression

Example:

Following Example display available seats for course and course status using ternary operator.

  <div ng-app
         ng-init="Courses=[
    { Subject:'Marathi', available:10 },
    { Subject:'History', available:20 },
    { Subject:'Math', available:30 },
    { Subject:'SocialScience', waiting:5 },
    { Subject:'Geography', available:31 }]">
 
        <!-- angular LOOP.-->
        <div ng-repeat="course in Courses">
            <!-- THIS CODE IS IN ONE LINE. -->
            <div>
                {{ 'Subject ' + course.Subject }} Status: {{course.available > 0 ? 'Course Available -' + course.available :'Waiting List -' + course.waiting}}
            </div>
        </div>
    </div>


धन्यवाद मित्रानो ... 

Invalid entry,please enter valid data.

Loading