不能在HTML

$ scope.aCourse [「名稱」]訪問嵌套的JSON對象被記錄到正確的安慰，但在HTML代碼沒有被填充到屏幕。

$scope.getCourse = function(idd){ 
     $http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password') ); 
     $http({ 
       method: 'GET', 
       url: 'http://localhost:8080/course/'+idd, 

      }).then(function successCallback(response) { 
       $scope.aCourse = response.data; 
       console.log($scope.aCourse["name"]); 

       window.location = "/website-take-course.html"; 
       }, function errorCallback(response) { 
        alert("Course data in fetching failed"); 
       }); 
    }

HTML代碼：

<div class="page-section padding-top-none" ng-repeat="c in aCourse" > 
      <div class="media media-grid v-middle"> 
       <div class="media-left"> 
       <span class="icon-block half bg-blue-300 text-white">1</span> 
       </div> 
       <div class="media-body" > 
       <h1 class="text-display-1 margin-none" >{{c.name}}</h1> 
       </div> 
      </div> 
      <br/> 
      <p class="text-body-2">{{c.description}}</p> 
      </div>

來源

2017-04-20 Mazen Mohamed

後你看，當你CONSOLE.LOG $ scope.aCourse – Sajeetharan

去看看在開發工具的JSON - 控制檯的錯誤，或在網絡選項卡看看返回的響應是什麼 –

爲什麼你重複一個**對象**（'ng-repeat =「c在aCourse」'）這是錯誤的。而是嘗試'{{aCourse。姓名}}' –

-1

在您設置一個療程的響應數據的角碼。然後，您訪問數據作爲一個對象：

$scope.aCourse["name"]

然後在你的HTML你正在運行在$ scope.aCourse的NG-重複就好像它是對象的數組：

<div class="page-section padding-top-none" ng-repeat="c in aCourse" >

你可能需要使用一個對象數組來使用當前的html，或者更新您的html並使用aCourse.name和aCourse.description訪問該對象。

來源

2017-04-20 18:25:22 Ken

爲什麼這會被低估？似乎是正確的答案 –

誰能告訴我爲什麼他們投下了這個？據我所知，我給出了準確的信息和問題的解決方案。 – Ken

根據你的文章，它看起來像$ scope.aCourse是一個對象，而不是一個數組。

改變它，如下所示，

<div class="page-section padding-top-none" "> 
    <div class="media media-grid v-middle"> 
     <div class="media-left"> 
      <span class="icon-block half bg-blue-300 text-white">1</span> 
     </div> 
     <div class="media-body"> 
      <h1 class="text-display-1 margin-none">{ aCourse.name }}</h1> 
     </div> 
    </div> 
    <br/> 
    <p class="text-body-2">{{aCourse.description}}</p> 
</div>

或使用這樣的遍歷對象，

<div ng-repeat="(key,value) in aCourse"> 
     {{key}} : {{value}} 
    </div>

DEMO

var app = angular.module('filterApp', []); 
 
app.controller('myCtrl', function($scope) { 
 

 
    $scope.aCourse = { 
 
     "content": "SO", 
 
     "description": "Programmers" 
 
    }; 
 

 
    
 
});

<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-app="filterApp" ng-controller="myCtrl"> 
 
    <div ng-repeat="(key,value) in aCourse"> 
 
    {{key}} : {{value}} 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-04-20 18:27:15 Sajeetharan

當數據是一個對象時，可以在數據「'中使用'ng-repeat =」（key，value）。修復此請 –

@AlonEitan感謝您的發現:) – Sajeetharan

大聲笑@MazenMohamed你[編輯]（http://stackoverflow.com/posts/43527039/edit）你的問題，而不是其他人的答案 –

有可能是一個兩種情況：

1.$scope.aCourse是對象[{},{},{}]的陣列。

DEMO

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

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.aCourse = [ 
 
     { 
 
     "name": "alpha", 
 
     "description" : "description1" 
 
     }, 
 
     { 
 
     "name": "beta", 
 
     "description" : "description2"  
 
     }, 
 
     { 
 
     "name": "gamma", 
 
     "description" : "description3"  
 
     } 
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <div class="page-section padding-top-none" ng-repeat="c in aCourse" > 
 
       <div class="media-body" > 
 
       <h1 class="text-display-1 margin-none" >{{c.name}}</h1> 
 
       </div> 
 
      <p class="text-body-2">{{c.description}}</p> 
 
      </div> 
 
</div>

2.$scope.aCourse是Object{......}。

DEMO

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

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.aCourse = { 
 
     "name": "alpha", 
 
     "description" : "description1" 
 
     }; 
 
    console.log($scope.aCourse["name"]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <div class="page-section padding-top-none" ng-repeat="(key, value) in aCourse" > 
 
       <div class="media-body" > 
 
       <h1 class="text-display-1 margin-none" >{{value}}</h1> 
 
       </div> 
 
      </div> 
 
</div>

來源

2017-04-21 08:33:04

回答

相關問題