根据复选框状态，在每个表行中显示angularjs复选框旁边的超链接或文本

Question

我有一个angularjs表，如下所示： -

以下是代码： -

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

取消选中该复选框。我想要一个包含URL 127.0.0.1/{{item.SERIAL}}的超链接文本“链接”显示在复选框旁边。选中该复选框后，复选框旁会显示一个普通文本“已选中”。

我正在使用angularjs v1。

Answer 1

试试这个，

单击复选框时应更改ON_OFF值。

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

Answer 2

您可以添加span模型的条件ON_OFF检查值，如下所示：

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