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

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

javascript angularjs checkbox

Javascript AngularJS：显示图像而不是复选框,javascript,angularjs,checkbox,Javascript,Angularjs,Checkbox,我想按如下方式显示我的复选框：如果未选中复选框，则应显示“+”，而选中复选框时应显示“-” 我现在有以下代码： <input type="checkbox" ng-checked="isDrinkInService(drink.Id)" ng-click="addOrDeleteDrink(drink)" /> 我不知道如何改变它，因为现在我有：有人能帮我吗？试试这个示例-示例复选框输入指令生产 .问题输入[type='checkbox

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

如果未选中复选框，则应显示“+”，而选中复选框时应显示“-”

我现在有以下代码：

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

我不知道如何改变它，因为现在我有：

有人能帮我吗？

试试这个


示例-示例复选框输入指令生产
.问题输入[type='checkbox']+标签：之后{
内容：“-”；
}
.问题输入[type='checkbox']：选中+标签：之后{
内容：“+”；
}
.问题输入[type='checkbox']{
显示：无；
}
标签{
光标：指针；
}
angular.module（'checkboxExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.checkboxModel={
价值1：正确，
价值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>


.隐藏{
显示：无；
}
#mycheckbox+#mycheckbox标签{
背景图像：url（“https://image.freepik.com/free-icon/minus-sign_318-59392.jpg");
宽度：16px；
高度：16px；
显示：内联块；
背景尺寸：封面；
}
#mycheckbox:checked+#mycheckbox标签{
背景图像：url（“http://pix.iemoji.com/images/emoji/apple/ios-9/256/heavy-plus-sign.png");
}

因为您有更多这样的功能，所以可以使用

类作为复选框和标签，而不是我的示例中的id
s。这与角度无关，只是一个css问题而已。您可以简单地使用图标而不是复选框，并且仍然将值保存在局部变量上。
<!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>