Bind html content в цикле с использованием angular.js

Question

Мне нужно связать некоторое содержимое html в цикле, используя angular.js.Я объясняю свой код ниже.

<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]); 
    } 

В приведенном выше коде, я могу связать дни в loop.I нужно здесь на каждом столбце каждой строки выберите те, код тега будет связываться в loop.Please помочь мне решить эту проблему.

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

обновлено: ваш json недействителен! проверить в jsonlint

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

если у вас есть данные в Вашей области noOfDays вы будете иметь доступ к этому ввиду, как я упоминал ниже!

Answer 3

код вы вывесили работает отлично: Код, который отвечал отлично работает, когда я скопировал его в jsfiddle: http://jsfiddle.net/jkrielaars/ejx7tmud/1/

Может быть, вы забыли, чтобы вызвать правильный контроллер в вашем HTML?

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

Или в вашей маршрутизации:

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

UPDATE

заменил jsfiddle URL ...