JSFiddle - React, Tailwind, and code Playground

by megaadriano

HTML

<html ng-app="app">
 <head>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
 </head>
 <body>
<div  ng-controller="Ctrl">
 <label ng-repeat="fruitName in fruits">
  <input
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruitName}}"
    ng-checked="selection.indexOf(fruitName) > -1"
    ng-click="toggleSelection(fruitName,'selection')"
  > {{fruitName}}
</label>
  <br>
  {{selection}}
</div>


</body>
</html>

CSS

.grid {
  width: 500px;
  height: 400px;
}

JavaScript

var app = angular.module('app', []);
app.controller("Ctrl", function ($scope){

 // Fruits
  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
	
  // Selected fruits
  $scope.selection = 'apple, pear'.split(',');

  // Toggle selection for a given fruit by name
  $scope.toggleSelection = function(objName, slcObj) {
    if(typeof($scope[slcObj])=='undefined')
    	$scope[slcObj] = [];
    var idx = $scope[slcObj].indexOf(objName);

    // Is currently selected
    if (idx > -1) {
      $scope[slcObj].splice(idx, 1);
    }

    // Is newly selected
    else {
      $scope[slcObj].push(objName);
    }
  };
})