AngularJS：显示图像而不是复选框答案

【问题标题】：AngularJS : display image instead of checkboxAngularJS：显示图像而不是复选框
【发布时间】：2017-10-07 15:12:02
【问题描述】：

我想按如下方式显示我的复选框：

复选框未选中时显示“+”，选中时显示“-”。

我现在有以下代码：

<input type="checkbox"
       ng-checked="isDrinkInService(drink.Id)"
       ng-click="addOrDeleteDrink(drink)" />

我不知道如何更改它，现在我有这个：

谁能帮帮我？

【问题讨论】：

这与angular无关，只是一个css问题
好吧。您可以简单地使用图标而不是复选框，并且仍然将值保存在局部变量中。

标签： javascript angularjs checkbox

【解决方案1】：

试试这个

https://plnkr.co/edit/vYNhJI7yvlxKSBYWE13y?p=preview

  <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>


  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<style>
  .question input[type='checkbox'] + label:after {
    content:"-";
}
.question input[type='checkbox']:checked + label:after {
    content:"+";
}
.question input[type='checkbox'] {
    display:none;
}
label {
    cursor:pointer;
}
</style>

</head>
<body ng-app="checkboxExample">
  <script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value1 : true,
       value2 : 'YES'
     };
    }]);
</script>
<form name="myform" ng-controller="ExampleController">
  <ul>
    <li class="question">
        <input type="checkbox" name="question" id="question1" />
        <label for="question1">Questions</label>
    </li>
    <li class="question">
        <input type="checkbox" name="question" id="question2" />
        <label for="question2">Questions</label>
    </li>
</ul>
 </form>
</body>
</html>

【讨论】：

【解决方案2】：

这是可能的。完整的工作示例：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .hidden {
            display: none;
        }

        #mycheckbox + #mycheckboxlabel {
            background-image: url("https://image.freepik.com/free-icon/minus-sign_318-59392.jpg");
            width: 16px;
            height: 16px;
            display: inline-block;
            background-size: cover;
        }
        #mycheckbox:checked + #mycheckboxlabel {
            background-image: url("http://pix.iemoji.com/images/emoji/apple/ios-9/256/heavy-plus-sign.png");
        }
    </style>
</head>
<body>
<input id="mycheckbox" type="checkbox" class="hidden">
<label for="mycheckbox" id="mycheckboxlabel"></label>
</body>

</html>

由于您有更多这些，您可以在我的示例中使用class 作为checkbox 和标签而不是ids。

【讨论】：