AngularJS：显示图像而不是复选框
[英]AngularJS : display image instead of checkbox
问题描述
i want to display my checkboxes as follows : 
我想显示我的复选框，如下所示：
The "+" should be displayed if the checkbox is not checked while the "-" should be displayed when it is checked. 如果未选中该复选框，则应显示“ +”，而选中该复选框则应显示“-”。
I have the following code for now : 我现在有以下代码：
<input type="checkbox"
ng-checked="isDrinkInService(drink.Id)"
ng-click="addOrDeleteDrink(drink)" />
I have no idea how to change it, for now i have this : 我不知道如何更改它，现在我有了这个：
Can anyone help me? 谁能帮我？
2 个解决方案
解决方案1
0 2017-05-09 10:49:02
try this 尝试这个
https://plnkr.co/edit/vYNhJI7yvlxKSBYWE13y?p=preview 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
0 2017-05-09 11:09:04
It is possible. 有可能的。 Entirely working example: 完整的工作示例：
<!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>
Since you have more of these, you could use a class for the checkbox and label instead of id s in my example. 由于您拥有更多此类内容，因此可以在示例中为checkbox和标签使用class ，而不是id 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.