mercredi 23 novembre 2016

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;

<script src="http://ift.tt/1mQ03rn"></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></td>
            <td></td>
            <td></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/ to appear beside the checkbox. When the checkbox is checked, an ordinary text "Checked" will appear beside the checkbox.

I am using angularjs v1.




Aucun commentaire:

Enregistrer un commentaire