Angularjs、show/hide 行的 table with ng-repeat

Question

抱歉，我是 ng-repeat 的新手。我如何 show/hide 行 table 正在使用 ng-repeat？如果下拉值为 1，则显示最底行。

    var i ;
    $scope.names = [];
    $scope.tmp = [];
    for(i=0;i<=10;i++){
        $scope.tmp[i] = i;
        $scope.names[i] = "name "+ i;
    }
    $scope.isShow = true

html

<select>
        <option ng-repeat="x in tmp">{{x}}</option>
</select>
 <table>
   <tr ng-show='isShow' ng-repeat="name in names">
     <td>{{name}}</td>
   </tr>
 </table>

Answer 1

可能您必须为 names 中的每个 name 添加属性 isShow？或者为每个 name.

创建具有可见状态的数组

angular.module('app', [])
  .directive('appDir', appDir);

angular.bootstrap(
  document.getElementById('root'), ['app']
);

function appDir() {
  return {
    template: `
       <table>
          <tr
              ng-repeat="name in names"
              ng-show="name.isShow"
          >
              <td>
                  {{name.title}}
              </td>
          </tr>
       </table>
       <select
          ng-model="selectedName"
          ng-options="x as x for x in tmp"
          ng-change="hiddenName()"
       >
    `,
    link: appDirLink
  }
}

function appDirLink($scope) {
  $scope.names = [];
  $scope.tmp = [];
  $scope.hiddenName = hiddenName;
  for (var i = 0; i < 10; i++) {
    $scope.names[i] = {
      id: i,
      title: 'name_' + i,
      isShow: true
    };
    $scope.tmp[i] = i;
  }

  function hiddenName() {
     $scope.names.map((name, index) => {
        name.isShow = (index < $scope.selectedName) ? true : false;
     });
  }

}

<div id="root">
    <app-dir></app-dir>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

Angularjs、show/hide 行的 table with ng-repeat

Angularjs, show/hide row's table with ng-repeat

javascript

html-table

angularjs

angularjs-ng-repeat