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'
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> |
<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'];
}); |
var app = angular.module('app', []);
app.controller('appController', function ($scope) {
$scope.genres = ['comedy', 'action'];
});