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中，您正在添加绑定表达式＆＃34; {{categorylisting}}＆＃34;到＆＃39;＆＃39;直接标记。我认为这不是编写绑定表达式的正确位置。

请尝试删除＆＃34; {{categorylisting}}＆＃34;来自＆＃39;＆＃39;标签，因为绑定表达式不应该在这个位置使用。

Answer 2

您的问题在于使用angular.toJson()。 https://docs.angularjs.org/api/ng/function/angular.toJson

$scope.categorylisting=data将对象或数组序列化为单个字符串。这个字符串非常适合传递给服务器，但它不再是一个对象，不能迭代。

在您的情况下，来自服务器的数据应该可以在没有任何序列化的情况下使用，即$http。

如果确实需要反序列化来自服务器的信息由于某种原因（这不是必需的，因为angular.fromJson()会自动执行），您可以使用.then()代替。 https://docs.angularjs.org/api/ng/function/angular.fromJson

顺便说一下，您应该尽可能使用.success()而不是弃用.then()。

使用.then()时，回调函数略有不同。 .then()回调从服务器接收有关响应的其他信息。以下代码是.then(function(response) { catarray.push(response.data); $scope.categorylisting = response.data; console.log($scope.categorylisting); });的正确格式：

{{1}}

使用Angularjs在html表上进行数据呈现

2 个答案: