Question

我有一个模态屏幕，ng-repeat显示一个带有ng-model的复选框列表。我发现ng-modal使复选框显示绿色边框。

        <div class="modal-body">
        <span ng-repeat="ptField in myForm.fieldsFromType" ng-hide="getFieldIndex(ptField.name) != -1">
            <label class="checkbox" for="{{item.id}}">
                <input type="checkbox" ng-model="ptField.checked" id="{{item.id}}"> {{ptField.label}}
            </label>
        </span>
    </div>

我在复选框background-color中添加了一个样式：#FFFFFF;这删除了绿色边框。

我想构建一个非常简单的指令，用于显示绿色边框的所有复选框。最好的方法是什么？

Answer 1

不需要指令。

.modal-body input[type='checkbox'] {
  background-color: #FFF;
}

除非你的问题是'ng-model'而不是'ng-modal'，否则在这种情况下：

input[type='checkbox'][ng-model] {
  background-color: #FFF;
}

Answer 2

如果你出于某种原因必须使用指令，而不是CSS类，那么你可以在这里使用它。

.directive('checkbox', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      var color = "red";
      elem.css({"background-color":color});
    }
  }
});

寻找一个应用背景颜色的简单角度类指令

2 个答案: