Chips test

by Kunal Paul

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.js"></script>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
     <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
           <div class="table-container">
        <table st-table="rowCollection" class="table">
        <thead>
          <tr>
            <th st-sort="firstName">ID</th>
            <th st-sort="lastName">Title</th>
          </tr>
        </thead>
        <tbody>
          <tr  st-select-row="row" st-select-mode="multiple" ng-repeat="row in rowCollection" ng-click="doSomeStuffToSelected(row)">
    <td>{{row[0]}}</td>
    <td>{{row[1]}}</td>
  </tr>
        </tbody>
      </table>
    </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open('lg')">Modal</button>
  </div>
  
</body>

CSS

.st-selected{
  background: #216eff !important;
  color: white !important;
  }

JavaScript

var app = angular.module('myApp', ['smart-table','ngAnimate', 'ui.bootstrap']);
app.controller('myCtrl',function($scope,$uibModal,$log){
  
  $scope.rowCollection = [["2017032517580346","HA Group Notification (WEEKLY_LOG) NOTICE"],
["2017031818200373","HA Group Notification (WEEKLY_LOG) NOTICE"],
["2017031818200372","HA Group Notification (WEEKLY_LOG) NOTICE"]];

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: true,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl as vm',
      size: 'lg',
      resolve: {
        items: function () {
          return $scope.rowCollection;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
      $log.info('Selected ' + $scope.selected);
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

});

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.rowCollection = items;
  $scope.selected = [];
  
  $scope.doSomeStuffToSelected = function(val) {
    console.log(JSON.stringify(val));
    $scope.selected.push(val);
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});