div中的ng-repeat不起作用

时间:2017-11-29 09:42:54

标签: javascript html angularjs

我已收到来自后端的active_content,并且响应正常,因为从console.log确认了一个数组。但是,这里的ng-repeat似乎并没有起作用。我试图在类似于设计的图块中显示类详细信息,以便每个类都有自己的图块和相应的细节。

HTML

<div class="row">
  <div ng-repeat="content in active_content" class="col-md-3">
     <div class="info-tile">
        <div class="tile-heading" style="font-size:30px"><span>{{content.class}}-{{content.division}}</span><span ng-if="content.stream"> | {{content.stream}} </span></div>
        <div style="font-size:20px;text-align:right;"><span>{{content.studentCount}} students</span></div>
        <div style="font-size:20px;text-align:right;padding-bottom:7%;"><span>5 absentees</span></div>
        <div class="tile-footer" style="font-size:13px;"><a  href="#" class="text-danger" ><span ng-show="content.classTeacherGender= 'M'">Mr.</span><span ng-show="content.classTeacherGender == 'F' ">Mrs.</span> {{content.classTeacherfName + " " + content.classTeacherlName}}</a></div>
     </div>
  </div>    

AngularJS

var co_data = {};

   co_data.token = $cookies.get("myToken");



           $http({
             method  : 'POST',
             url     : 'Here goes my php service ',
             data    : co_data,
             headers : {'Content-Type': 'application/x-www-form-urlencoded'}
            })
            .then(function(response) {
            console.log(response);
         if(response.data.status){

               $scope.isContentFound = true;             
               $scope.active_content = response.data.response;
               console.log("Active Content", $scope.active_content);

          }

           else{ 
              $scope.isContentFound = false;      
              $scope.active_content = {};
           }
              }); 
          }
        $scope.fetchContent();

Chrome控制台

Active Content 
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{class: "01", division: "A", classTeacherfName: "Abhijith", classTeacherlName: "C S", classTeacherGender: "M", …}
1
:
{class: "02", division: "A", classTeacherfName: "FAVAZ", classTeacherlName: "M", classTeacherGender: "M", …}
2
:
{class: "04", division: "A", classTeacherfName: "RITHWICK", classTeacherlName: "ANIL", classTeacherGender: "M", …}
3
:
{class: "05", division: "A", classTeacherfName: "MANJU", classTeacherlName: "ANIL", classTeacherGender: "M", …}
4
:
{class: "11", division: "B", classTeacherfName: "Anas", classTeacherlName: "Jafry", classTeacherGender: "M", …}
5
:
{class: "12", division: "A", classTeacherfName: "SHAHIL", classTeacherlName: "NUHMAN", classTeacherGender: "M", …}
6
:
{class: "10", division: "C", classTeacherfName: "SAIRAB", classTeacherlName: "RAHMAN", classTeacherGender: "M", …}

2 个答案:

答案 0 :(得分:2)

在你的ng-repeat中写下这个..

ng-repeat="content in active_content track by $index"

,或者

ng-repeat="content in active_content track by content.class"

答案 1 :(得分:0)

您可能在Repeater中有Duplicate Key 试试

ng-repeat="content in active_content track by $index"