[英]Angularjs, show/hide row's table with ng-repeat
抱歉,我是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>
可能是你必须添加属性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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.