如何使用angularJS在列嵌套的ng-repeat中执行搜索，以便首先填充所有行

How to perform search with angularJS inside column nested ng-repeat in order to fill all rows first

本文关键字：填充 搜索 执行 angularJS 何使用 嵌套 ng-repeat      更新时间：2023-09-26

我有这个表的行和列，但我想知道如何用angularjs搜索数据，所以它移动到行，而不是留在相同的列。例如，如果您搜索数字3，它会形成字母L。我想让它把数据放在一行如果那一行100%被填满然后移动到另一列填充那一行等等。示例- 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>并让它们换行到下一行。

<<p> 视图/strong> 
<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;
}
控制器

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];
});
http://jsfiddle.net/6aqtj/69/

相关文章：