user91579631 user91579631 - 16 days ago 4
AngularJS Question

Show text beside checkbox depending on whether it is checked or unchecked

Currently, I have a angularjs table that looks like this.

enter image description here

Here is the code;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="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>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td>
</tbody>
</table>
</div>

<script>
var app = angular.module('app',[]);
app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.check_items =
[
{
SERIAL:'Test Serial',
NAME:'Test Name',
ID : 10,
ON_OFF : '1'
}
];

$scope.rowSelected = function(row)
{
console.log(row);
};
}]);
</script>


I would like the text "On" to appear beside each checkbox in each row whenever it is checked. The text "Off" will appear beside each checkbox in each row whenever it is unchecked.

I am using angularjs v1.

Answer
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)">{{item.ON_OFF == 1 ? 'On' : 'Off'}}</td>

You can do this if you have AngularJS 1.1.5 or more