Estoy tratando de hacer que ng-repeat utilice mi formCheckBox de clase css en AngularJS. Entonces, cuando se carga el formulario, crea varias casillas de verificación usando mi estilo css. En este momento, las casillas de verificación desaparecen y no hay estilo. Intenté simplemente usar class="formCheckBox" pero tampoco funciona.

Aquí está el código:

html :

 <div require-global-documentvariable="HTML_General_NORM"> <label ng-repeat="fruitName in fruits"> <input ng-class="{'formCheckBox' : fruitName}" type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-checked="selection.indexOf(fruitName) > -1" ng-click="toggleSelection(fruitName)" > {{fruitName}} </label> </div>

CSS :

 .formCheckBox:checked + label::after { content: ''; position: absolute; width: 1.2ex; height: 0.4ex; background: rgba(0, 0, 0, 0); top: 0.9ex; left: 0.4ex; border: 3px solid #2c677d; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .formCheckBox { line-height: 2.1ex; } .formCheckBox { position: absolute; left: -999em; } .formCheckBox + label { position: relative; overflow: hidden; cursor: pointer; } .formCheckBox + label::before { content: ""; display: inline-block; vertical-align: -25%; height: 2ex; width: 2ex; background-color: white; border: 2px solid #2c677d; border-radius: 4px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.25); margin-right: 0.5em; }

J.S .:

 // Fruits $scope.fruits = ['apple', 'orange', 'pear', 'naartjie']; // Selected fruits $scope.selection = ['apple', 'pear']; // Toggle selection for a given fruit by name $scope.toggleSelection = function toggleSelection(fruitName) { var idx = $scope.selection.indexOf(fruitName); // Is currently selected if (idx > -1) { $scope.selection.splice(idx, 1); } // Is newly selected else { $scope.selection.push(fruitName); } $scope.DocumentData.HTML_General_NORM = $scope.selection.join(','); };