user91579631 user91579631 - 1 year ago 80
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=""></script>
<div ng-app="app" ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<th class="Serial_">
<th class="Name_">
<th class="ID_">
<th class="On_off_">
<tr ng-repeat="item in check_items">
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td>

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)

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 Source
<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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download