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

【问题标题】：Show hyperlink or text beside angularjs checkbox in each table row depending on checkbox status根据复选框状态在每个表格行中的 angularjs 复选框旁边显示超链接或文本
【发布时间】：2017-04-08 08:13:30
【问题描述】：

我有一个 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。

【问题讨论】：

标签： html angularjs checkbox

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：