AngularJS，使用ng-repeat顯示/隱藏行表

Question

抱歉，我是ng-repeat的新手。 如何顯示/隱藏使用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

可能是你必須添加屬性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>