Angularjs, показать / скрыть таблицу строк с помощью ng-repeat - PullRequest
Новая
       19

Angularjs, показать / скрыть таблицу строк с помощью ng-repeat

0 голосов
/ 28 ноября 2018

Извините, я новичок в нг-повтор.Как я могу показать / скрыть таблицу строк, которая использует 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>

1 Ответ

0 голосов
/ 28 ноября 2018

Может быть, вы должны добавить свойство isShow для каждого name в names?Или создайте массив с видимым статусом для каждого 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>
...