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

Question

I have an angularjs table that looks like this:-

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.

rejo · Accepted Answer · 2016-11-24 06:41:56Z

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>

Tajkia Rahman Toma · Accepted Answer · 2016-11-24 06:36:55Z

1

You can add conditional span checking value of the ON_OFF model like below:

<td> 
    <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)">
    <span ng-if="item.ON_OFF == '1'">Checked</span>
    <span ng-if="item.ON_OFF != '1'"><a ng-href="127.0.0.1/{{item.SERIAL}}">Link</a></span>
</td>

answered Nov 24, 2016 at 6:36

Tajkia Rahman Toma

4701 gold badge5 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related