angularjs - 当检查中的复选框时，将类添加到元素中

Question

我有一个选择的 div，每个都有一个复选框。当每个特定的复选框被选中时，我正在尝试向标签添加一个类。

我看到我可以为每个盒子创建一个特定的模型（ng-model:"isChecked-1" 然后 ng-class="'active' : isChecked-1"）等等，但它似乎不是很代码高效。

有什么想法吗？

这是我的代码：

<div class="col-md-4">
<label class="checkbox-inline btn col-md-12" ng-class="{'active' : isChecked}">
  <input type="checkbox" id="inlineCheckbox1" value="option1" ng-model="isChecked"> Clothes
</label>
</div>
<div class="col-md-4">
<label class="checkbox-inline btn col-md-12" ng-class="{'active' : isChecked}">
  <input type="checkbox" id="inlineCheckbox1" value="option2"> Cars
</label>
</div>
<div class="col-md-4">
<label class="checkbox-inline btn col-md-12" ng-class="{'active' : isChecked}">
  <input type="checkbox" id="inlineCheckbox1" value="option3"> Music
</label>
</div>

Answer 1

听起来像是指令的工作：

.directive('myCheckbox', function() {

    return{
        restrict: 'E',
        template: '<div class="col-md-4"> \
                      <label class="checkbox-inline btn col-md-12" ng-class="{active : isChecked}"> \
                         <input type="checkbox" id="inlineCheckbox1" value="option1" ng-model="isChecked" />{{text}} \
                      </label> \
                   </div>',
        replace: true,
        scope: {
            text: '@'
        }
    };
})

看法：

<my-checkbox text='Clothes'></my-checkbox>
<my-checkbox text='Cars'></my-checkbox>
<my-checkbox text='Music'></my-checkbox>

Fiddle