Angular Built-in directives
This example demonstrates how Angular expressions are evaluated when using type="text" and type="number" for the input element. Consider the following controller and view:
Controller
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.textInput = {
value: '5'
};
$scope.numberInput = {
value: 5
};
});View
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="textInput.value">
{{ textInput.value + 5 }}
<input type="number" ng-model="numberInput.value">
{{ numberInput.value + 5 }}
</div>When using + in an expression bound to text input, the operator will concatenate the strings (first example), displaying 55 on the screen*.
When using + in an expression bound to number input, the operator return the sum of the numbers (second example), displaying 10 on the screen*.
* - That is until the user changes the value in the input field, afterward the display will change accordingly.