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

我要显示我的复选框如下： Displayed checkboxes AngularJS：显示图像，而不是复选框

的“+”应显示，如果未选中该复选框，而“ - ”要当检查显示。

我已经为现在下面的代码：

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

我不知道如何去改变它，现在我有这个： Displayed checkboxes

谁能帮助我？

来源

2017-05-09 Keisuke246

这与角无关，只是一个CSS问题 – charlietfl

那么。您可以简单地使用图标而不是复选框，并将值保存在局部变量上。 – Sagar

试试这个

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>

来源

2017-05-09 10:49:02

这是可能的。全部工作例如：

<!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和标签，而不是id在我的例子。

来源

2017-05-09 11:09:04

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

回答

相关问题