Angular控制器来检索json数据

Angular controller to retrieve json data

本文关键字：json 数据 检索 控制器 Angular      更新时间：2023-09-26

这里我实际上是在尝试获取json数据，并使用angular控制器将它们显示在jade模板上。

控制器: processJson.js 

 var getJson = angular.module('getJson', []).controller('controller1',   function ($scope, $http) {
var url = '/fields/fieldlist';
console.log(url);
$http.get(url).success(function (data) {
    $scope.posts = data;
  });
 });

这不会解析json数组到jade模板

fields.js 

var express=require('express');
var router =express.Router();

 router.get('/fieldlist',function(req,res){
  var db=req.db;
  var collection=db.get('domlist');
   collection.find({},{},function(e,docs){
    res.json(docs); 
  });  
});
module.exports=router;

返回一个json数组对象。

这是我的翡翠模板

html
head

body 
     div(ng-app='getJson')
        div(ng-controller='controller1')
            div(ng-repeat='post in posts')
                div(ng-switch-when='text')
                    input(type='text' id='{{post.id}}' ng-model='post.value' placeholder='{{post.placeholder}}')
                    block content

这里有几点:

不要在控制器中使用$http。Ajax请求和一般的数据发送/检索应该在您注入到控制器中的服务或工厂中进行。

在这种情况下，您应该考虑编写一个包含getFields()方法的fieldService，并从控制器调用它。

由于我非常怀疑这是你的问题的原因，我将在你的例子中指出困扰我的地方:

  • 你使用$http很容易引起很多麻烦，如果没有错的话。您可能会对$http的文档感兴趣，它解释了最推荐的使用方法。还要考虑捕获请求中的错误，以防出现任何错误并阻止您的数据显示。

  • 在你的模板中，你使用了一个没有父ng-switch的ng-switch-when属性。当然，我不是专家，但我不确定这是否有效。如果你想让div显示当'text'为真值时，可以考虑使用ng-if或ng-show，甚至在ng-repeat中使用过滤器。

  • 我也假设'text'是一个你忘记放在你的例子中的作用域变量。

  • 你的url在你的两个例子中都不一样，你确定它们都是正确的吗?

我没有时间尝试重现您的问题，对不起。我希望这些要点中至少有一点可以帮助您了解自己做错了什么。

要测试您的解决方案，请考虑将其分解为单独的可测试组件。经常使用硬编码JSON提供的ng-init angular指令可能会暴露出问题和错误的假设。

这是一个关于ng-init的SO问题....

所以ng-init-json-object

相关文章：