Question

我必须使用图像设置/替换所有复选框和单选按钮。我可以通过在每次输入（复选框/无线电）之后添加一个span标签来轻松完成此操作。

<label for="rememberme">
  <input type="checkbox" class="unique" id="rememberme"/>
  <span class="icon-checkbox"></span>
</label>

我如何在角度js中执行此操作。我无法通过添加span元素来修改所有htmls，就好像出现问题需要时间才能恢复但我有一个独特的类，或者我可以添加一个属性来编写指令。

我尝试使用属性，但我无法检查生成的span元素，如果我将其用作元素，它工作正常。

如果我用作属性，则输出为

<input type="text" class="form-control" custom-input="">
   <input type="text" class="form-control">
   <span class="icon-checkbox">Checkbox icon</span>
</input>

这是有效的吗？

Plunker here

Answer 1

我不会担心自定义指令只是用图像替换复选框。您可以使用CSS执行此操作：

<!--HTML-->
<input type="text" class="form-control checkboxwithicon">

/*CSS*/
.checkboxwithicon{
  position:relative;
}
.checkboxwithicon::after{
  content:url('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/check-icon.png');
  position:absolute;
  top:-10px;
  left:15px;
}

正确定位图像，以隐藏复选框。

Answer 2

您可以编写一个指令，它会在元素后面生成跨度图标复选框（它应该是一个复选框）并使其像一个属性，然后您可以在所需的每个输入复选框中标记它。即使出现了错误，你也不满意这种变化，你不必浪费时间和精力来恢复原状，只需修改指令即可。

Answer 3

我根据您的建议进行了操作，但没有对HTML进行任何更改以便轻松回退

.directive('input',function(){
    return{
        require: '?ngModel',
        restrict:'EAC',
        link:function(scope,element,attr){
          var html = angular.element("<span class='icon-checkbox'>Checkbox icon</span");

          if( (angular.lowercase(element[0].tagName)==="input") && (angular.lowercase(attr.type)=== "checkbox"))
              element.after(html)
        }
    }
})

Working Plunker

用图像angularjs替换复选框

3 个答案: