Angular custom复选框指令在ng-repeat中不起作用

我已经为复选框创建了一个自定义指令，可以在我的应用程序中使用它。我用下面的代码创建了复选框。Angular custom复选框指令在ng-repeat中不起作用

angular.module("myApp") 
    .component("ngCheckbox", { 
     template: 
      '<div class="ng-control-checkbox">' + 
      '<input id="check" type="checkbox" data-ng-model="$ctrl.checked" class="checkbox">' + 
      '<label for="check">'+ 
      '<span data-ng-bind="$ctrl.label"></span>' + 
      '</label>' + 
      '</div>' + 
      '', 

     bindings: { 
      label: '=?', 
      checked: '=' 
     }, 
     controller: function() { 
      var $ctrl = this; 
     } 
    });

CSS

.ng-checkbox label{ 
     cursor: pointer; 
     margin-left: 20px; 
    } 
    .ng-checkbox label:before { 
    content: "\e911"; 
    cursor: pointer; 
    color: #84919A; 
    } 
    .checkbox { 
    display: none; 
    } 
    .checkbox:checked + label:before { 
    content: "\e910"; 
    cursor: pointer; 
    color: $color_forest_green; 
    }

HTML

 <div data-ng-repeat="notification in notificationList" > 
     <ng-checkbox data-checked="notification.selected"></ng-checkbox> 
     <div>

使用CSS :: before来更改内容。我不想为此写任何JS。
我不能改变的HTML结构，因为我必须使用特定应用图标为CSS内容的复选框

问题

正如我绑定的复选框的ID与为的标签我不能够使用此复选框内ng-repeat。我希望得到一个解决方案，因为我坚持这一点。

在此先感谢。

来源

2016-09-28 Shareer

有一个动态ID，每次有复选框实例时自动递增，或者将其从当前的ngRepeat迭代中取出并传递给指令。

或者，您可以只构造HTML，以便标签隐式链接到没有ID的输入。围绕输入包装标签应该做到这一点。

来源

2016-09-28 13:37:19

Angular custom复选框指令在ng-repeat中不起作用

回答

相关问题