samedi 9 septembre 2017

Display Data On Modal Screen Based On User Selection Using Check Box

I need your help regarding one particular logic.

"I've displayed 20 records in navigation tab and against each records I've added coloumn for checkbox. My requirement is if user selects records (row) 1, 4, 8 using checkbox and click on "Edit" button on top of Navigation tab then it should display on "Modal" screen so that user can edit it.

if he/she selects records 5, 8, 6 then records should be display in that particular order.

I google it but couldn't find any related posts.

Below is my HTML code:

<div ng-app="RecordApp" ng-controller="recordcontroller" class="container-fluid">

    <div class="input-group">
        <ul class="nav nav-tabs">
            <li role="menu" class="active"><a href="#" data-toggle="tab" >User Data</a></li>
        </ul>

        <table class="table">
            <thead>
                <tr>

                    <th>
                        <a href="#">Select</a>
                    </th>
                    <th>
                        <a href="#" ng-click="SortBy = 'Test1'; Reverse = !Reverse;">Test1</a>
                    </th>
                    <th>
                        <a href="#" ng-click="SortBy = 'Test2'; Reverse = !Reverse;">Test2</a>
                    </th>
                    <th>
                        <a href="#" ng-click="SortBy = 'Test3'; Reverse = !Reverse;">Test3</a>
                    </th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="record in Records | orderBy:SortBy:Reverse ">



                    <td>
                        <input type="checkbox" checked="checked" ng-model="record.Selected" ng-change="Checked(record)" />
                    </td>

                    <td></td>
                    <td></td>
                    <td></td>
                 </tr>
            </tbody>
        </table>
    </div>

following is my AngularJs code for populating the navigation tab

  $http.get(pageBaseUrl + "api/records").success(function (records) {
        $scope.Records = records;
        $scope.IsLoading = false;
    });

Aucun commentaire:

Enregistrer un commentaire