Specializations

Tuesday, September 13, 2016

Angularjs Table generation with Table,

@{
    ViewBag.Title = "My details";
}

<script src="~/Scripts/js/angular.min.js"></script>
<form class="form-horizontal" ng-app="myApp" ng-controller="namesCtrl">
<fieldset>

    <legend>My Cases</legend>

       <script>
           angular.module('myApp', []).controller('namesCtrl', function ($scope) {
           
               $scope.TaskDetails = [
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'},
                  {TaskID:'1234',Region:'IN',District:'ap',Reason:'nothing'}
               ];
               $scope.orderByMe = function (x) {///  button click event
                   $scope.myOrderBy = x;
               }
           });
        </script>

<input type="text" id="taskSearch"   ng-model="taskSearch"  /><!-- this will help for search condition with all fields-->

       <div class="form-group">

                    <table border="1" width="100%" class="table table-inverse">
                        <tr>

                            <th ng-click="orderByMe('TaskID')">Task Id</th>                        
                            <th ng-click="orderByMe('Region')">Region</th>
                            <th ng-click="orderByMe('District')">District</th>
                            <th ng-click="orderByMe('Reason')">Reason</th>

                        </tr>
                        <tr ng-repeat="x in TaskDetails  | filter:taskSearch | orderBy:myOrderBy">

                            <td><a  href="@Url.Content("~/MVCControllerName/ActionMethodName")" >{{x.TaskId}}</a></td>
                            <td>{{x.TaskID}}</td>
                            <td>{{x.Region}}</td>
                            <td>{{x.District}}</td>
                            <td>{{x.Reason}}</td>
                        </tr>
                    </table>
                </div>
    </fieldset>
    </form>

No comments:

Post a Comment