Hello all, I am new to Angular so please bear with me if I make any mistakes in the terminology.
Below is a simple example where I am trying to bind a template in a directive within an ng-repeat. When updating the input field, {{list.name}} gets updated but the {{formattedtext}} does not change.
How can I make sure that the formatted text reflects the correct value?
HTML
<div ng-repeat="list in List" style="border: 1px solid;">
<list-item>
</list-item>
</div>
<div ng-repeat="list in List" style="border: 1px solid;">
<input ng-model="list.name" />
</div>
app.js
referenceController.$inject = ['$scope'];
var app = angular.module('app',[]).controller('referenceController', referenceController);
app.directive("listItem", function () {
return {
restrict: "E",
scope: false,
template: "<div>Yo {{formattedText}} {{list.name}}</div>",
link: function (scope, element, attrs) {
scope.formattedText = scope.list.name + ' (' + scope.list.abbreviation + ')';
}
}
});
referenceController.js
function referenceController($scope) {
$scope.List = [
{ id: 1, name: 'Name1', abbreviation:'1'},
{ id: 2, name: 'Name2', abbreviation: '2'},
{ id: 3, name: 'Name3', abbreviation: '3'},
{ id: 4, name: 'Name4', abbreviation: '4'}
];
}