In order to concatenate a model property values in
AngularJS, we need to create an extended property on the model and then use
that property with the ng-model directive.
We can illustrate this with the following angular module:
var app = angular.module('app', []);
app.controller('AppCtrl', function ($scope) {
$scope.customer = {name: 'ozkary', id: '1234' };
$scope.allInfo = function (data) {
return data.id + ' - ' + data.name;
}
});
On the view, we attempt the following:
<body ng-app="app" ng-controller="AppCtrl">
<h2>Extended Property - ng-init expression</h2>
<h2>Bad - ng-model does not like expressions</h2>
<input type="text" ng-model="allInfo(customer)">
</body>
The ng-model can only accept a property for a two way binding,
so it does not work with an expression. Therefore, we need to create another property
that meets our desired results. In order to do that, we can use the ng-init
directive to evaluate an expression and assign the result to another property,
info. We can then use ng-model directive with this new property. We can demonstrate
this as follows:
<input type="text" ng-model="customer.info"
ng-init="customer.info
= allInfo(customer)">
To view this in action visit this plunk: http://plnkr.co/edit/PSvwCE?p=info
We can now take a complex model and create extended properties
to easily bind it to the view.
Hope this tip is useful.