سؤال

I have a modal screen, a ng-repeat displays a list of checkboxes with ng-model. I discovered the ng-modal is making the checkbox displays a green border.

        <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>

I added a style to the checkbox background-color: #FFFFFF; this removed the green border.

I would like to build a really simple directive that would be used for all checkboxes that appear to have green border displayed. what is the best way to do it?

هل كانت مفيدة؟

المحلول

No directive needed.

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

Unless you meant 'ng-model' and not 'ng-modal' in your question, in which case:

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

نصائح أخرى

If you have to use a directive for some reason, rather than a CSS class, here how you could do it.

.directive('checkbox', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      var color = "red";
      elem.css({"background-color":color});
    }
  }
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top