Question

我需要使用angular.js在循环中绑定一些html内容。我正在解释下面的代码。

<table class="table table-bordered table-striped table-hover" id="dataTable">
<tr>
<td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i><BR>Day <i class="fa fa-long-arrow-down"></i></td>
<td width="100" align="center" >9AM :: 10AM</td>
<td width="100" align="center">10AM :: 11AM</td>
<td width="100" align="center">11:15AM :: 12:15PM</td>
<td width="100" align="center">12:15PM :: 01:15PM</td>
<td width="100" align="center">02PM :: 03PM</td>
<td width="100" align="center">03PM :: 04PM</td>
<td width="100" align="center">04PM :: 05PM</td>
</tr>
<tbody id="detailsstockid">
<tr ng-repeat="days in noOfDays ">
<td width="100" align="center" style=" vertical-align:middle">{{days}}</td>
<td width="100" align="center" style="padding:0px;" >
<table style="margin:0px; padding:0px; width:100%">
<tr><td >
<select id="coy" name="coy" class="form-control" >
<option value="">Select Cource</option>
<option value="A">Theory1</option>
<option value="B">Theory2</option>
<option value="C">Theory3</option>
<option value="D">Theory4</option>      
</select>
</td></tr>
<tr><td>
<select id="coy" name="coy" class="form-control" >
<option value="">Select Faculty</option>
<option value="A">Faculty1</option>
<option value="B">Faculty2</option>
<option value="C">Faculty3</option>
<option value="D">Faculty4</option>         
</select>
</td>
</tr>
</td>
</table>
</td>
</tr>   
</tbody>
</table>

以下是我的控制器文件代码。

$scope.noOfDays=[];
    $scope.days={'0': "Monday", '1' : 'Tuesday' , '2' :'Wednesday' , '3' : 'Thursday' , '4': 'Friday'}
    for(var i=0;i<5;i++){
        $scope.noOfDays.push($scope.days[i]);
    }

在上面的代码中，我能够在循环中绑定天。我需要在每行的每一列上选择标记代码将在循环中绑定。请帮我解决这个问题。

Answer 1

我制作了一个带有工作代码的代码段。我已将小时数移到列表中（$ scope.hours）并使用ng-repeat来渲染它们。因此，您可以使用一个小时列表来填充行的每一列。

var $scope = {};

var myApp = angular.module('myApp', []);


myApp.controller('tableCtrl', ['$scope',
      function($scope) {

        $scope.noOfDays = [];
        
        $scope.gridData = {};

        $scope.days = {
          '0': "Monday",
          '1': 'Tuesday',
          '2': 'Wednesday',
          '3': 'Thursday',
          '4': 'Friday'
        }
        
        $scope.hours = [
          '9AM :: 10AM',
          '10AM :: 11AM',
          '11:15AM :: 12:15PM',
          '12:15PM :: 01:15PM',
          '02PM :: 03PM',
          '03PM :: 04PM',
          '04PM :: 05PM'
        ]

        for (var i = 0; i < 5; i++) {
          $scope.noOfDays.push($scope.days[i]);
        }

      }]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="tableCtrl">
  
<table class="table table-bordered table-striped table-hover" id="dataTable">
  <tr>
    <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i>
      <br>Day <i class="fa fa-long-arrow-down"></i>
    </td>
    <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour"></td>
  </tr>
  <tbody id="detailsstockid">
    <tr ng-repeat="day in noOfDays">
      <td width="100" align="center" style=" vertical-align:middle" ng-bind="day"></td>
      <td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours">
        <table style="margin:0px; padding:0px; width:100%">
          <tr>
            <td>
              <select id="coy" name="coy" class="form-control" ng-model="gridData[day][hour].course">
                <option value="">Select Cource</option>
                <option value="A">Theory1</option>
                <option value="B">Theory2</option>
                <option value="C">Theory3</option>
                <option value="D">Theory4</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <select id="coy" name="coy" class="form-control" ng-model="gridData[day][hour].faculty">
                <option value="">Select Faculty</option>
                <option value="A">Faculty1</option>
                <option value="B">Faculty2</option>
                <option value="C">Faculty3</option>
                <option value="D">Faculty4</option>
              </select>
            </td>
          </tr>
      </table>
      </td>
    </tr>
  </tbody>
</table>
  
  {{gridData}}
</div>

Answer 2

您发布的代码工作正常：当我在jsfiddle中复制时，您发布的代码工作正常：http://jsfiddle.net/jkrielaars/ejx7tmud/1/

也许你忘了在你的html中调用正确的控制器？

<div ng-app>
    <div ng-controller="MyCtrl">

或在你的路由中：

$routeProvider.
    when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeCtrl'
    })

<强>更新

替换了jsfiddle网址...

Answer 3

更新：你的json无效！检查jsonlint

<tr ng-repeat="days in noOfDays "> <td width="100" align="center" style=" vertical-align:middle">{{days}}</td>

如果你的noOfDays范围内有数据，你可以访问我在下面提到的那个数据！

使用angular.js在循环中绑定html内容

3 个答案: