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

Question

Sorry, i'm new to ng-repeat. How can i show/hide row table that is using ng-repeat? And the most bottom row is shown if dropdown value is 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

May be you must add property isShow for each name in names ? Or create array with visible status for each 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>