AngularJS expressions

Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}.

Angular expressions examples:

  • {{1+2}}
  • {{a+b}}
  • {{user.name}}
  • {{items[index]}}
  • {{func()}}
  • {{func(a); func2('str');}}
  • {{count = count + 1}}
  • {{3*10|currency}} - returns '$30.00'
  • {{text | json}}
  • {{yourName || 'defaultValue'}}
  • $scope.genres = ['comedy', 'action']; {{ genres.join(', ') }} - returns 'comedy, action'

Angular expressions cheatsheet

download Angular expressions cheatsheet pdf

<section ng-app="app">
    <div ng-controller="appController" class="well">
        <form class="form-horizontal" name="appFormName" novalidate>
            <div class="form-group">
                <label class="col-sm-2 control-label">{{ user.name || 'Please enter name' }}</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="user.name" name="userName" class="form-control" required />
                </div>
            </div>
        </form>
        <div>form = {{user | json}}</div>
        <div ng-class="{empty: !counter}" ng-bind="counter || '?'" <strong>{{user.name}}</strong>></div>
        <div class="empty" ng-show="!user.name">N/A</div>
        <div ng-cloak>
            <input type="checkbox" ng-model="terms.agree" />
            <input type="submit" value="submit" ng-disabled="!terms.agree" />
        </div>
    </div>
    <div class="gallery-date">{{(gallery.date | date:'mediumDate') || "Various"}}</div>
    <div>{{ genres.join(', ') }}</div>
</section>
var app = angular.module('app', []);
 
app.controller('appController', function ($scope) {
    $scope.genres = ['comedy', 'action'];
});

Leave a Reply

Your email address will not be published. Required fields are marked *