Updated bootstrap multiple grids sample - added new column to table with filtering logic

Author: AndreyChayko

Diff for: demo/bootstrap/js/multipleApp.js

@@ -1,5 +1,6 @@
 angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
     .controller('myAppController', ['$scope', function ($scope) {
+        $scope.statuses = ['On Vacation','Terminated','Employed'];
 
         $scope.gridOptions1 = {
             data: generateJSON(100)
@@ -26,6 +27,7 @@ angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
                 item.name = names[Math.round(Math.random() * (names.length - 1))];
                 item.phone = '+375-29-' + Math.round(Math.random() * 1000000);
                 item.date = Math.round(Math.random() * 1000000000000);
+                item.status = $scope.statuses[Math.round(Math.random() * ($scope.statuses.length - 1))];
                 jsonObj.push(item);
 
             }

Diff for: demo/bootstrap/multiple.html

@@ -86,6 +86,18 @@ <h2>First Grid</h2>
                         <th sortable="date" class="sortable">
                             Date Of Birth
                         </th>
+                        <th class="st-sort-disable th-dropdown">
+                            <select class="form-control width-15"
+                                    filter-by="status"
+                                    filter-type="select"
+                                    ng-model="status"
+                                    ng-change="filter()">
+                                <option value="">All Statuses</option>
+                                <option ng-repeat="option in statuses track by $index"
+                                        value="{{option}}">{{option}}
+                                </option>
+                            </select>
+                        </th>
                     </tr>
                     </thead>
                     <tbody>
@@ -94,6 +106,7 @@ <h2>First Grid</h2>
                         <td ng-bind="item.name"></td>
                         <td ng-bind="item.phone"></td>
                         <td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
+                        <td ng-bind="item.status"></td>
                     </tr>
                     </tbody>
                 </table>
@@ -182,6 +195,18 @@ <h2>Second Grid</h2>
                         <th sortable="date" class="sortable">
                             Date Of Birth
                         </th>
+                        <th class="st-sort-disable th-dropdown">
+                            <select class="form-control width-15"
+                                    filter-by="status"
+                                    filter-type="select"
+                                    ng-model="status"
+                                    ng-change="filter()">
+                                <option value="">All Statuses</option>
+                                <option ng-repeat="option in statuses track by $index"
+                                        value="{{option}}">{{option}}
+                                </option>
+                            </select>
+                        </th>
                     </tr>
                     </thead>
                     <tbody>
@@ -190,6 +215,7 @@ <h2>Second Grid</h2>
                         <td ng-bind="item.name"></td>
                         <td ng-bind="item.phone"></td>
                         <td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
+                        <td ng-bind="item.status"></td>
                     </tr>
                     </tbody>
                 </table>