Question

AngularJS V1.6.4

$ scope.aCourse [“name”]正确记录到控制台，但在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>

Answer 1

根据你的帖子，它看起来像$ 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>

<强>样本

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>

Answer 2

可能有两种情况：

1。 $scope.aCourse是一个对象数组[{},{},{}]。

<强>样本

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 {......}。

<强>样本

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>

Answer 3

在您的角度代码中，您将aCourse设置为响应数据。然后，您可以使用以下命令将数据作为对象访问：

$scope.aCourse["name"]

然后在你的html中，你在$ scope.aCourse上运行一个ng-repeat，好像它是一个对象数组：

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

您需要使aCourse成为一个对象数组以使用您当前的html，或者更新您的html并使用aCourse.name和aCourse.description访问该课程中的对象。

无法访问HTML中的嵌套JSON对象

3 个答案: