Question

我有表头的复选框，我想基于复选框点击隐藏表格列和行，

<ul>
    <li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
 </ul>

<table>
    <tr>                                
      <th ng-show="checked=='true'">Activity ID</a></th>
      <th>Activity Description</th>
    </tr>
<tr ng-repeat="nm in makerQueueData">
  <td ng-show="checked=='true'">{{nm.formattedIdentifier}}</td>
  <td>{{nm.description}}</td>
</tr>
</table>

我试过但没有运气。

Answer 1

<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>




  <table>
         <tr>                                
         <th ng-show="checked"><a>Activity ID</a></th>   

         //here checked gets bool value itself based on selection. you don't need to compare it to string 'true'.

         //keep in mind i assume {{checked}} returns only bool value
         <th>Activity Description</th>
        </tr>


        <tr ng-repeat="nm in makerQueueData">
          <td ng-show="checked">{{nm.formattedIdentifier}}</td>
          <td>{{nm.description}}</td>
        </tr>
        </table>

为你的工作小提琴：http://jsfiddle.net/b69pkeLd/1/ 如果出现任何问题，请告诉我。

Answer 2

我希望这就是你要找的东西：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.fieldvalues = [
        {text: 'Test1', checked: false}, 
        {text: 'Test2', checked: false}
    ];
    $scope.makerQueueData = [
        'Whatever your', 'data is'
    ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="opt in fieldvalues">
        <input type="checkbox" id="checkbox-{{$index}}" ng-model="opt.checked" value="{{opt.text}}" />
        <label for="checkbox-{{$index}}">{{opt.text}}</label>
        <table ng-show="opt.checked">
            <tr>                                
                <th>Activity ID</a></th>
                <th>Activity Description</th>
            </tr>
            <tr ng-repeat="nm in makerQueueData">
                <td ng-show="opt.checked'">{{$index}}</td>
                <td>{{nm}}</td>
            </tr>
        </table>
    </div>
</div>

此外，使用<label>进行type="checkbox"说明。这使标签可以点击。

使用AngularJs隐藏表列和行

2 个答案: