Check out the following HTML:
<body ng-app="myCatApp">
<div ng-controller="catagoryController">
<add-remove-lister list="catagories"></add-remove-lister>
</div>
</body>
And here is the JS code:
app.controller('catagoryController', ['catagoryList', '$scope', function(catagoryList, $scope) {
$scope.catagories = catagoryList.catagoryList;
}]);
app.directive('addRemoveLister', [function () {
return {
scope: {
list: '='
},
template: function(tElement, tAttrs, scope) {
templateHTML = '<ul>';
var list = scope.list;
for (o = 0; o < list.length; o++) {
var curObject = scope.list[o];
templateHTML +='<li ng-repeat="listItem in list"><button type="button" ng-hide="listItem.userSelected" ng-click="addToList()">Add</button>';
templateHTML +='<button type="button" ng-hide="listItem.userSelected" ng-click="removeFromList()">Remove</button>{{listItem.text}}';
for (var prop in curObject) {
if (curObject.hasOwnProperty(prop) && prop.constructor === Array) {
templateHTML += '<add-remove-lister list="listItem.'+ prop +'"></add-remove-lister>';
}
}
templateHTML += '</li>';
}
templateHTML += '<ul>';
return templateHTML;
}
}
}]);
Unfortunately, there seems to be an issue with the code. When debugging, I noticed that the "list" variable is showing up as just a string "catagories" instead of the actual object from the controller's scope...
Let me elaborate on my objective:
I am working on a directive that will generate a list from any given array. The requirements are: 1) All elements in the array must be objects containing properties {text : 'text', userSelected: 'bool'}
If the directive encounters an object within the list that has a property which is itself an array (containing objects with the aforementioned two properties), it should call itself recursively on that array.
In addition, the directive should display buttons next to each list item so users can modify the userSelected property of the object (to include them in their "options")