使用Angularjs在html表格上呈現數據

Question

我正在使用以下腳本來呈現角度。我能打印console.log( $scope.categorylisting); 從下面的代碼格式如下

[{"_id":"56910a45889f853c14f59092","tagname":"man","slug":"man","__v":0,"count":0,"parent":"0","description":null},{"_id":"569342c9a0f3720c13e4d1d1","tagname":"women","slug":"women","__v":0,"count":0,"parent":"0","description":null}] 

但在HTML中不能得到的價值。任何幫助，將不勝感激！

var app = angular.module('forsubmitApp', []); 
app.controller('adminFormCtrl', function ($scope, $http) { 

var formdata = { 
     tagname: "default", 
     slug: "default", 
     parent: "0", 
    }; 


$scope.adminSubmitForm = function() { 
    console.log($scope.formdata); 
    $http({ 

    url: "/admin/addcategory", 
    data: $.param($scope.formdata), 
    method: 'POST', 

    headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'} 

    }).success(function(data){ 
    $scope.formdata={}; 
    alert("Category Added Successfully") 

    }).error(function(err){"ERR", console.log(err)}) 
    }; 

    }); 
    var catarray =[]; 
    app.controller('adminListCtrl', function ($scope, $http) { 
    // function adminListCtrl($scope, $http) { 

    var loadCategoryList = function(){ 
    $http({ 
     method: 'GET', 
     url: '/admin/fetchcategorylist', 
     headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'} 

    }).success(function(data, status) { 

     catarray.push(angular.toJson(data,false)); 
     $scope.categorylisting= angular.toJson(data); 
     console.log( $scope.categorylisting); 
    }); 

    }; 
    loadCategoryList(); 
    }); 

我在使用mongodb的節點控制器中的目標http調用。

app.get('/admin/fetchcategorylist',function(req,res){ 
    res.setHeader("Access-Control-Allow-Origin", "*"); 
    res.setHeader('charset', 'utf-8'); 
    res.setHeader('Content-Type', 'application/json'); 
    res.header('Access-Control-Allow-Methods', 'POST'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type'); 

    Category.find({parent:"0"},function(err,docs){ 
    console.log(JSON.stringify(docs)); 
    res.send(JSON.stringify(docs)); 
    }) 
    }); 

以下是相同的html部分。

<div class="mainpanel" ng-app="forsubmitApp" > 
    <div id="col-right" n> 

    <table ng-controller="adminListCtrl" class="wp-list-table widefat fixed striped tags ui-sortable" > 
    <thead> 
    <tr> 

    <th scope="col" id="slug" class="manage-column column-slug sortable desc"><a href="#"><span>Slug</span><span class="sorting-indicator"></span></a></th> 

    </tr> 
    </thead> 
    <tbody id="the-list" data-wp-lists="list:tag" > 

    <tr id="tag-37" class="ui-sortable-handle" ng-repeat="category in categorylisting track by $index "> 

    <td class="slug column-slug" data-colname="Slug" style="cursor: move;">{{category.slug}}</td> 

    </tr> 
    </tbody> 

    </table> 
    </div> 

Answer 1

在你的HTML，你是直接添加綁定表達式 「{{categorylisting}}」，以 '' 標籤。我認爲這不是編寫綁定表達的正確位置。

請嘗試從''標籤中移除「{{categorylisting}}」，因爲綁定表達式不應該在此位置使用。

Answer 2

您的問題在於使用angular.toJson()。 https://docs.angularjs.org/api/ng/function/angular.toJson

angular.toJson()將對象或數組序列化爲單個字符串。這個字符串非常適合傳遞給服務器，但它不再是一個對象，無法迭代。

就你而言，來自服務器的數據應該可以按原樣使用，不需要任何種類的序列化，即$scope.categorylisting=data。

如果確實需要反序列化來自服務器的信息，出於某種原因（因爲$http會自動執行此操作，所以不需要），您可以使用angular.fromJson()代替。 https://docs.angularjs.org/api/ng/function/angular.fromJson

順便提一下，您應該儘可能使用.then()而不是已棄用的.success()。使用.then()時，回調函數略有不同。 .then()回調接收有關來自服務器的響應的附加信息。以下代碼是.then()的正確格式：

.then(function(response) { 
    catarray.push(response.data); 
    $scope.categorylisting = response.data; 
    console.log($scope.categorylisting); 
});