我目前正在与Angularjs建立一个网站(我的第一个)。我遇到了一个我可以解决的问题'似乎要解决。
情况: 在某种形式中,某个用户必须选择多个部门(链接到我的模型上的不同字段)。由于这些选择者的部门'总是一样的我选择使用指令。
指令
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>'
}
});
html中的用法
<selectDepartmentmodelfield="Unit.DepartmentA" collectionvalues="MyDepartments" modalid="modalSelectDepartmentA"></selectafdeling>
<selectDepartmentmodelfield="Unit.DepartmentB" collectionvalues="MyDepartments" modalid="modalSelectDepartmentB"></selectafdeling>
输出html(MyDepartments中的第一个itm)
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.
问题:
尽管radiobutton组具有不同的名称,但它们似乎仍然充当同一个无线电 - 但是组合。任何人都有任何想法?