表格行中的ng-repeat

时间:2015-10-08 09:56:48

标签: javascript php angularjs

我无法让它发挥作用。我想建立一个表格,其中包含我从角度获得的数据。我的php看起来不错。从我在网上找到的例子来看,我的html看起来很好。但是我不知道出了什么问题。

我的HTML代码:

<div class="box">
<div class="box-header">
  <h3 class="box-title"><?php echo $lang['LBL_LIST_INSTRUCTORS']; ?></h3>
</div><!-- /.box-header -->
<div class="box-body">
  <table id="instructors" class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <th><?php echo $lang['LBL_EDIT']; ?></th>
        <th><?php echo $lang['LBL_NAME']; ?></th>
        <th><?php echo $lang['LBL_ID']; ?></th>

      </tr>
    </thead>
    <tbody>
        <tr ng-repeat="id in instructors">                                      
          <td>
            <button class="btn" ng-click="editUser(id.id)">
              <span class="glyphicon glyphicon-pencil"></span>  Edit
            </button>
          </td>
          <td>{{ id.name }}</td>
          <td>{{ id.id }}</td>
        </tr>
    </tbody>

  </table>
</div><!-- /.box-body -->
</div><!-- /.box -->

JS

var AppInstructor = angular.module('instructorApp', []);

AppInstructor.controller('instructorCtrl', function($scope, $http) {

    getInstructors(); 
    function getInstructors(){
    $http.post("php/getAllInstructors.php").success(function(data){
        $scope.instructors = data;
       });
    };

});

var MyApp = angular.module('biqs_instructor_app', ['instructorApp']);

我的php返回的内容:

[{"id":"3","Code":"JJ","Name":"Jan Janssen","Name2":"","Address":"Bergveld 22","Address2":"","City":"9000 Gent","Contact":"","PhoneNo":"03 223 223","OurAccountNo":"","Blocked":"0","Priority":"0","FaxNo":"","VATRegistrationNo":"","GenBusPostingGroup":"","PostCode":"","County":"","EMail":"","HomePage":"","VATBusPostingGroup":"","Notification":"1","ColorPlanning":"green","Birthday":"2015-07-09 14:03:31","RecruitmentDate":"0000-00-00 00:00:00","LocationCode":"","CalendarCode":"","LicenceType":""}

错误:

TypeError: Cannot read property 'insertBefore' of null
    at forEach.after (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:3168:13)
    at Object.JQLite.(anonymous function) [as after] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:3252:17)
    at Object.$provide.$get.options.enter (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:4671:23)
    at ngRepeatTransclude (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:24509:26)
    at publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:6956:29)
    at directiveName.$get.boundTranscludeFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:7096:16)
    at controllersBoundTransclude (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:7756:18)
    at ngRepeatAction (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:24502:15)
    at Object.$watchCollectionAction [as fn] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:14110:13)
    at Scope.promises.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:14243:29)

3 个答案:

答案 0 :(得分:1)

尝试将<tr>...</tr>元素包装在<div>...</div>

希望它会对你有所帮助。

problem

查找类似的问题

答案 1 :(得分:1)

这对我有用,所以问题可能在于php,但不知道。

              <table id="instructors" class="table">
            <thead>
              <tr>
                <th></th>
                <th>Name</th>
                <th>ID</th>
              </tr>
            </thead>
            <tbody ng-repeat="item in instructors">
                <tr >
                  <td>
                     <span ng-click="editUser(item.id)" class="glyphicon glyphicon-pencil"></span>  Edit
                  </td>
                  <td>{{item.Name}}</td>
                  <td>{{item.id}}</td>
                </tr>
            </tbody>

          </table>

答案 2 :(得分:0)

我发现了问题所在。

表ID与angular相同。