代码之家 › 专栏 › 技术社区 › Eric Bergman

AngularJS-按范围将对象集合绑定到HTML表

bind angularjs html javascript

Eric Bergman · 技术社区 · 6 年前

因此,我在名为“MainController”的控制器中定义了以下对象的javascript集合:

        $scope.records = [
            {
                id: 100,
                name: 'Item Shipping 100',
                minute: 7
            },
            {
                id: 101,
                name: 'Item Shipping 101',
                minute: 9
            },
            {
                id: 102,
                name: 'Item Shipping 102',
                minute: 15
            }
        ];

我想在每个单元格中将此集合绑定到一个HTML表,范围为10分钟:

每个单元格代表一个10分钟的范围,在每个单元格中,我只想显示属于单元格中每个范围的记录集合中的项目,这就是我现在的做法,是否有更好的方法来做到这一点?我问的原因是我有很多行要添加,我不想重复这段代码很多次,也许有更好的方法来绑定它。

   <div ng-controller="MainController">

        <table class="table">

            <thead>

                <tr>
                    <th>0 - 9</th>
                    <th>10 - 19</th>
                    <th>20 - 29</th>
                    <th>30 - 39</th>
                    <th>40 - 49</th>
                    <th>50 - 59</th>
                </tr>

            </thead>

            <tbody>


                <tr class="even-row">


                    <td>
                        <div class="record" ng-repeat="item in records" ng-if="item.minute >= 0 && item.minute <= 9">

                            <div>{{ item.id }}</div>
                            <div>{{ item.name }}</div>

                        </div>
                    </td>


                    <td>
                        <div class="record" ng-repeat="item in records" ng-if="item.minute >= 10 && item.minute <= 19">

                            <div>{{ item.id }}</div>
                            <div>{{ item.name }}</div>

                        </div>
                    </td>


                    <td>
                        <div class="record" ng-repeat="item in records" ng-if="item.minute >= 20 && item.minute <= 29">

                            <div>{{ item.id }}</div>
                            <div>{{ item.name }}</div>

                        </div>
                    </td>


                    <td>
                        <div class="record" ng-repeat="item in records" ng-if="item.minute >= 30 && item.minute <= 39">

                            <div>{{ item.id }}</div>
                            <div>{{ item.name }}</div>

                        </div>
                    </td>


                    <td>
                        <div class="record" ng-repeat="item in records" ng-if="item.minute >= 40 && item.minute <= 49">

                            <div>{{ item.id }}</div>
                            <div>{{ item.name }}</div>

                        </div>
                    </td>



                    <td>
                        <div class="record" ng-repeat="item in records" ng-if="item.minute >= 50 && item.minute <= 59">

                            <div>{{ item.id }}</div>
                            <div>{{ item.name }}</div>

                        </div>
                    </td>


                </tr>

            </tbody>
        </table>

 </div>

谢谢您!

2 回复 | 直到 6 年前

Stock Overflaw 6 年前

可以在控制器中定义范围,例如:

$scope.ranges = [];
$scope.rangeStep = 10;
for (var i = 0; i < 60; i += step) {
  ranges.push([i, i + step - 1]);
}

然后在HTML中,只写一个 th 例如:

<tr>
  <th ng-repeat="range in ranges">{{ range[0] }} - {{ range[1] }}</th>
</tr>

只有一个 td

              <tr>
                <td ng-repeat="range in ranges">
                    <div class="record" ng-repeat="item in records" ng-if="item.minute >= range[0] && item.minute <= range[1]">

                        <div>{{ item.id }}</div>
                        <div>{{ item.name }}</div>

                    </div>
                </td>
              </tr>

这样就可以了,如果需要更多的列或其他步骤,只需编辑 ranges 在控制器中声明。

Marcus Höglund 6 年前

一个选项是将所有范围添加到控制器中的数组,然后在视图中循环该数组。

angular.module("app",[]).controller("MainController", function($scope){
  
 $scope.minuteRanges = [
  {
    text: "0 - 9",
    min: 0,
    max: 9
  },
  {
    text: "10 - 19",
    min: 10,
    max: 19
  },
  {
    text: "20 - 29",
    min: 20,
    max: 29
  },
 {
    text: "30 - 39",
    min: 30,
    max: 39
  },
  {
    text: "40 - 49",
    min: 40,
    max: 49
  },
  {
    text: "50 - 59",
    min: 50,
    max: 59
  },
 ];
 $scope.records = [
            {
                id: 100,
                name: 'Item Shipping 100',
                minute: 7
            },
            {
                id: 101,
                name: 'Item Shipping 101',
                minute: 9
            },
            {
                id: 102,
                name: 'Item Shipping 102',
                minute: 15
            }
        ];
});

<style>
table, tr, th, td {
   border: 1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">

        <table class="table">
            <thead>
                <tr>
                    <th ng-repeat="range in minuteRanges">{{range.text}}</th>
                </tr>
            </thead>

            <tbody>
                <tr class="even-row">
                    <td ng-repeat="range in minuteRanges">
                        <div class="record" ng-repeat="item in records" ng-if="item.minute >= range.min && item.minute <= range.max">
                            <div>{{ item.id }}</div>
                            <div>{{ item.name }}</div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

 </div>