javascript - 无法将数据从 Controller 读取到 View 中

Question

在 View 中

 <fieldset>
                         <legend>Projects:</legend>
                            <label>Total: {{projectsData.totalProjects}}</label> <br>
                            <label>Create: {{projectsData.createdProjects}}</label> <br>
                            <label>Open: {{projectsData.openProjects}}</label> <br>
                            <label>Completed: {{projectsData.completedProjects}}</label> <br>
                            <label>Accepted: {{projectsData.acceptedProjects}}</label> <br>



                    </fieldset>

在 Controller 中

    app.controller('dashboardConroller', ['$scope', '$http', function($scope, $http){

        var userDashboardService = dashboardService($http);

        $scope.projectsData = [
{  
    "totalProjects": "20",
   "createdProjects":"2",
   "openProjects":"3",
   "completedProjects":"5",
   "acceptedProjects":"10"
}
];

    }])

在 View 中我没有得到任何东西，来自 JSON 的数据没有显示。我不知道为什么？

Answer 1

$scope.projectsData 是对象数组。

如果你想使用对象数组，那么你可以使用[ng-repeat][1]。

例如

<p ng-repeat="project in projectsData">
 <label>Total: {{project .totalProjects}}</label> <br> 
<label>Create: {{project .createdProjects}}</label> <br> 
<label>Open: {{project .openProjects}}</label> <br> 
<label>Completed: {{project .completedProjects}}</label> <br>
 <label>Accepted: {{project .acceptedProjects}}</label> <br
</p>

如果你不使用对象数组那么你的对象应该是这个

 $scope.projectsData =  {  
    "totalProjects": "20",
   "createdProjects":"2",
   "openProjects":"3",
   "completedProjects":"5",
   "acceptedProjects":"10"
};

因此，您的 HTML 将无需更改即可工作。

<label>Total: {{projectsData.totalProjects}}</label> <br> 
<label>Create: {{projectsData.createdProjects}}</label> <br>
<label>Open: {{projectsData.openProjects}}</label> <br>
<label>Completed: {{projectsData.completedProjects}}</label> <br>
<label>Accepted: {{projectsData.acceptedProjects}}</label> <br>