I'm currently building a website with Angularjs (my first). I've come to a problem that I just can' seem to fix.
The situation: In a form a certain user must select several departments (which are linked to different fields on my model). Since the departments of these 'selectors' are always the same I opted to use a directive.
The directive
app.directive('selectDepartment', function () {
return {
restrict: 'E',
scope: {
ModelfieldToUpdate: '=',
collectionvalues: '=',
},
link: function (scope, elem, attrs)
{
//Get Attributes
attrs.$observe('modalid', function (value) {
scope.myModalId = value;
});
scope.$watch('modelfield', function (value) {
scope.selectedValue = scope.ModelfieldToUpdate;
});
},
template:'<div>' +
'<div id="{{myModalId}}" class="modal">' +
'<div class="modalContentCollection">' +
'<form action="#">' +
'<p ng-repeat="itm in collectionvalues>' +
'<input name="{{myModalId}}collectionGroup" ng-model="$parent.selectedValue" value={{itm}} type="radio" id="{{itm}}"/>' +
'<label for="{{itm}}">{{itm}}</label>' +
'</p>' +
'</form>' +
'</div>' +
'<div class="modalMenu centered">' +
//Some buttons here
'</div>' +
'</div>' +
'</div>' +
'</div>'
}
});
Usage in html
<selectDepartmentmodelfield="Unit.DepartmentA" collectionvalues="MyDepartments" modalid="modalSelectDepartmentA"></selectafdeling>
<selectDepartmentmodelfield="Unit.DepartmentB" collectionvalues="MyDepartments" modalid="modalSelectDepartmentB"></selectafdeling>
Output html (for the first itm in MyDepartments)
Snippet out of first:
<input name="modalSelectDepartmentAcollectionGroup" ng-model="$parent.selectedValue" value=FIN type="radio" id="FIN"/>
==> Does work
Snippet out of the second:
<input name="modalSelectDepartmentBcollectionGroup" ng-model="$parent.selectedValue" value=FIN type="radio" id="FIN"/>
==> Does not work. Even clicking it won't select it.
The problem:
Although the radiobutton-group have different names, they still seem to act as one and the same radio-buttongroup. Anybody got any ideas why?