JSFiddle - React, Tailwind, and code Playground

by falkone

HTML

<body ng-app="yourTest">

<div ng-controller="testList">
	<ul>
		<li ng-repeat="employee in items">
            <label>{{employee.name}}
                <input type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name)" />
            </label>
        </li>

	</ul>
	<ul>
		<li ng-repeat="employee in books">
            <label>{{employee.name}}
                <input type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name)" />
            </label>
        </li>
	</ul>
    <ul>
		<li ng-repeat="employee in users">
            <label>{{employee.name}}
                <input type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name)" />
            </label>
        </li>

	</ul>
	<hr>
	<ul>
		<li type="checkbox" ng-repeat="name in selection" ng-click="remove($del)">{{name}}</li>

	</ul>
</div>
     
</body>

JavaScript

var yourTest = angular.module('yourTest', []);

yourTest.controller('testList', function ($scope) {
  $scope.items=[
    {'name': 'Js', 'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Css','snippet': 'The Next, Next Generation tablet.'},
    {'name': 'Html', 'snippet': 'The Next, Next Generation tablet.'}
  ];

  $scope.books=[
    {'name': 'Book1', 'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Book2','snippet': 'The Next, Next Generation tablet.'},
    {'name': 'Book3', 'snippet': 'The Next, Next Generation tablet.'}
  ];
    
  $scope.users=[
    {'name': 'User1', 'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'User2','snippet': 'The Next, Next Generation tablet.'},
    {'name': 'User3', 'snippet': 'The Next, Next Generation tablet.'}
  ];

  $scope.selection=[];
  // toggle selection for a given employee by name
  $scope.toggleSelection = function toggleSelection(employeeName) {
     var idx = $scope.selection.indexOf(employeeName);

     // is currently selected
     if (idx > -1) {
       $scope.selection.splice(idx, 1);
     }

     // is newly selected
     else {
       $scope.selection.push(employeeName);
     }
   };

$scope.remove = function (del, index){
	var index = $scope.selection.indexOf(del);
       $scope.selection.splice(index, 1);
};
  
});