AngularJS Built-in directives Angular expressions - Text vs. Number
Example
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.
