user91579631 user91579631 - 15 days ago 6
HTML Question

Show hyperlink or text beside angularjs checkbox in each table row depending on checkbox status

I have an angularjs table that looks like this:-

enter image description here

Here is the code below:-

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


When the checkbox is unchecked. I want a hyperlink text "Link" containing the URL
127.0.0.1/{{item.SERIAL}}
to appear beside the checkbox. When the checkbox is checked an ordinary text "Checked" will appear beside the checkbox.

I am using angularjs v1.

Answer

Try this,

Should change the ON_OFF value while click on check box.

 $scope.rowSelected = function(row)
  {
      row.ON_OFF = (row.ON_OFF=='1')?'0':'1';
  };

<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)">
            <a ng-show="item.ON_OFF=='0'" ng-href="127.0.0.1/{{item.SERIAL}}">LINK</a>
            <span ng-show="item.ON_OFF=='1'">CHECKED</span>
            </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)
      {
          row.ON_OFF = (row.ON_OFF=='1')?'0':'1';
      };
   }]);
  </script>