Twitter Bootstrap Question posted in

Change this number character into a checkbox inside a table on angularjs – Twitter bootstrap

I have this html code which uses angularjs to display contents in a table.

<div ng-controller="CheckCtrl">
    <table class="table table-hover data-table sort display">
        <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>{{item.SERIAL}}</td>
            <td>{{item.NAME}}</td>
            <td>{{item.ID}}</td>
            <td>{{item.ON_OFF}}</td>
        </tbody>
    </table>
</div>

The webpage looks like this;

enter image description here

Here is the 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;
        });

I would like to change the On/Off columns number character into a checkbox. If the number character is ‘0’, the checkbox is unchecked. If the number character is ‘1’, the checkbox is checked.

I am using angularjs v1 and twitter bootstrap.

EDIT: Sorry, I realized that my checkbox value is a character, not a number. They are ‘0’, ‘1’ and not 0, 1.

Tags:

3

Answers


  1. 0 
    <input type='checkbox' ng-checked='{{item.ON_OFF == 1}}'>

    Think that should do it.

    Login or Signup to reply.
  2. 0 
    <input type="checkbox" ng-model="{{item.ON_OFF}}" ng-true-value="1" ng-false-value="0">

    ng-true-value the value that will set the input checked
    ng-false-value="0" the value that will set the input unchecked

    Angular Documentation
    https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

    Login or Signup to reply.
  3. 0 
    function myCtrl($scope) {
    $scope.check_items = [ {
       'SERIAL':12345,
       'NAME': 'ANil Kumar Ram',
       'ID' : 1,
       'ON_OFF': '1'
    },{
       'SERIAL':6453,
       'NAME': 'Rohan Ram',
       'ID' : 2,
       'ON_OFF': '0'
    },{
       'SERIAL':732,
       'NAME': 'Sunil Ram',
       'ID' : 3,
       'ON_OFF': '0'
    },{
       'SERIAL':1261,
       'NAME': 'Ram Jitesh',
       'ID' : 4,
       'ON_OFF': '1'
    }]
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app ng-controller="myCtrl">
    <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>{{item.SERIAL}}</td>
            <td>{{item.NAME}}</td>
            <td>{{item.ID}}</td>
            <td> <input type="checkbox" ng-checked="item.ON_OFF == '1'"></td>
        </tbody>
    </table>
</div>

    Hope this will help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search