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>

あなたはこれらの多くを持っているので、あなたは私の例では代わりにid秒のcheckboxとラベルにclassを使用することができます。

出典

2017-05-09 11:09:04

AngularJS：代わりにチェックボックス

答えて

関連する問題