我有这个行和列的表格,但我想知道如何使用 angularjs 搜索数据,以便它移动到行中,而不是停留在相同的列中。例如,如果您搜索数字 3,它会变成字母 L。我希望它将数据放在一行中,如果该行已 100% 填充,则移至另一列并填充该行,依此类推...关于 fiddle 的示例 - http://jsfiddle.net/6aqtj/67/
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<table cellspacing="0" cellpadding="0">
<colgroup span="7"></colgroup>
<input type="search" ng-model="search" placeholder="search">
<br><br>
<tbody>
<tr ng-repeat="days in dates">
<td ng-repeat="day in days | filter:search">
{{ day }}
<!-- After seven iterations a new `<tr>` should be aded -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
AngularJS:
window.myApp = this.angular.module('myApp', []);
var monthDays = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
myApp.controller('MyCtrl', function($scope) {
var dates = [];
for (var i = 0; i < monthDays.length; i++ ) {
if (i % 7 == 0) dates.push([]);
dates[dates.length-1].push(monthDays[i]);
}
return $scope.dates = dates;
});
最佳答案
不使用表格,只使用<span>
并让它们换行到下一行。
查看
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<p><input type="search" ng-model="search" placeholder="search" /></p>
<div class="calendar">
<span class="day" ng-repeat="day in dates | filter:search">{{ day }}</span>
</div>
</div>
CSS
.calendar {
font-size: 12px;
margin: 10px 0;
width: 154px;
border: solid 1px #ccc;
border-width: 1px 0 0 1px;
}
.day {
border: solid 1px #ccc;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px 0;
width: 22px;
text-align:center;
box-sizing: border-box;
}
Controller
window.myApp = this.angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
return $scope.dates = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
});
关于javascript - 如何在嵌套的 ng-repeat 列中使用 angularJS 执行搜索以便首先填充所有行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25017885/