AngularJS：顯示圖像而不是復選框
[英]AngularJS : display image instead of checkbox
問題描述
我想顯示我的復選框，如下所示：
如果未選中該復選框，則應顯示“ +”，而選中該復選框則應顯示“-”。
我現在有以下代碼：
<input type="checkbox"
ng-checked="isDrinkInService(drink.Id)"
ng-click="addOrDeleteDrink(drink)" />
我不知道如何更改它，現在我有了這個：
誰能幫我？
2 個解決方案
解決方案1
0 2017-05-09 10:49:02
嘗試這個
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
有可能的。 完整的工作示例：
<!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>
由於您擁有更多此類內容，因此可以在示例中為checkbox和標簽使用class ，而不是id 。
AngularJS If Checkbox是檢查顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.