All, I barely have a week of angular behind me and I am still struggling with some of the concepts. Below is a piece of code I came up with. The idea is to let the user add/delete entries in a model (in practice, the model is read from a json and is more complex than what is presented). While this code seems to work, I'm wondering whether it's "proper" angular:
- Is it OK to leave the
add_itemfunction in the controller ? I understand that any DOM manipulation should be put in a directive, but it's only manipulating the model, right? - Shouldn't the
del_itembe in the controller too, then? - Using the index to control which item to delete look a bit dangerous, what would be a better alternative?
Thanks for any input.
<html ng-app="main">
<head >
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-controller="BaseController">
{{items}}
<div>
<button type="button" ng-click="add_item()">
New item
</button>
</div>
<ul>
<li ng-repeat="i in items">
<display-item idx={{$index}}></display-item>
</li>
</ul>
</div>
<script>
angular.module("main", [])
.controller("BaseController",
function($scope){
$scope.items = [{key:1, a:'A'},{key:2, a:'B'},{key:3, a:'C'}];
$scope.last = $scope.items.length;
$scope.add_item = function() {
var item={key: $scope.last + 1, a:'?'};
$scope.items.push(item);
$scope.last += 1;
};
}
)
.directive('displayItem',
function() {
return {
restrict: 'E',
transclude: true,
scope: {idx: '@'},
template: '<strong>{{idx}}:</strong>'+
'{{$parent.items[idx].key}}={{$parent.items[idx].a}}'+
'<button ng-click="del_item(idx)">X</button>',
link: function(scope, element, attrs) {
scope.del_item=function(i){
scope.$parent.items.splice(i,1)}
}
}
}
);
</script>
