I am looking to accomplish the following task:
I have an array of objects within my Angular controller and I want to create a directive that will generate a div element in the HTML view for each member of that array. Additionally, I need the view to automatically update when new items are added to or removed from the array. Here is my approach:
This is my controller:
app.controller("timelineCtrl", function ($scope) {
$scope.arr={};
.
.
.
}
This is my directive:
app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: true,
template: '<div> Hello {{arrayItem}} </div>',
link: function ($scope, element, attrs) {
// At this point, I acknowledge the need to write some code
// I must monitor any changes in the array and render them in the HTML view
}
};
});
This is my view:
<div class="row" ng-controller="timelineCtrl">
<hello-world></hello-world>
</div
I understand that I should include necessary code within the link property of the directive, but I am facing challenges with this. Do I need to create a loop to iterate through the array and verify values?