0

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?

4

0 に答える 0