JSFiddle - React, Tailwind, and code Playground

by Trina Lu

HTML

<div ng-app="myapp">
  <div ng-controller="ItemController">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>id</th>
          <th>item</th>
          <th>amount</th>
          <th>btns</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="sign in signs">
          <td>
            <input type="checkbox" ng-model="sign.selected" ng-change="sign.selected">
          </td>
          <td>{{sign.id}} </td>
          <td>{{sign.item}} </td>
          <td>{{sign.amount}} </td>
          <td>
            <input type="button" value="choose me" ng-model="sign.selected" ng-click="chooseThis(sign)">
          </td>
        </tr>
      </tbody>
    </table>
    <input type="button" value="getSigns" ng-click="getSigns(sign)">
    <br> 
    <br> {{signs}}
    <br> {{signsToSend }}
  </div>
</div>

JavaScript

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

app.controller('ItemController', ['$scope', '$filter', function($scope, $filter) {
  $scope.signsToSend = [];
  $scope.signs = [{
    id: 0,
    item: 'dragon',
    amount: 3
  }, {
    id: 1,
    item: 'wolf',
    amount: 5
  }, {
    id: 2,
    item: 'winterfell',
    amount: 1
  }];

  $scope.chooseThis = function(item) {
    item.selected = true;
    $scope.getSigns();
  }
  $scope.getSigns = function() {
    $scope.signsToSend = $filter('filter')($scope.signs, {
      selected: true
    });
  }
}]);