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

选中具有ng-class的元素时，将类添加到元素中

1 个答案: