mardi 8 novembre 2016

Send row info to angularjs controller when checkbox in row is clicked

I have some html code which uses angularjs to show a table. On this table, there is a checkbox on each row.

The table looks like this; enter image description here

Here is the html code.

<div ng-app ng-controller="CheckCtrl">
    <table class="table table-hover data-table sort display" style="width:100%">
        <thead>
        <tr>
            <th class="Serial_">
                Serial
            </th>
            <th class="Name_">
                Name
            </th>
            <th class="ID_">
                ID
            </th>
            <th class="On_off_">
                On/off
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in check_items">
            <td></td>
            <td></td>
            <td></td>
            <td> <input type="checkbox" ng-checked="item.ON_OFF == '1'"></td>
        </tbody>
    </table>
</div>

Here is my angularjs controller code.

controller('CheckCtrl', ['$scope', '$http', 'configuration', 
    function ($scope, $http, $configuration) {
        var url_api = $configuration.host + "cloe/webroot/cloe-cloud/app/API.json";
        $http.get(url_api).success(function(data)
        {
            $scope.check_items = data;
        });

This is what I want. When a user selects a checkbox, information regarding all the items on that particular row belonging to the selected checkbox is sent to a angualrjs controller function for processing. This information should include the Serial, Name, ID and new state of On/Off after clicking on the checkbox.

I am using angularjs v1 and twitter bootstrap.




Aucun commentaire:

Enregistrer un commentaire