无法显示来自$ http的数据使用angular获取数据，django

我有一个在后端使用Django开发的应用程序，其中创建了一个可以使用angular读取前端信息的API。

我用$ http调用数据库中的人员列表，在函数中获取数据，并用console.log显示并且是正确的，但是当我使用ng-repeat在模板中调用该信息时，内容div创建，但里面的信息不显示，保持空白。

我会很感激任何解决这个问题的方法。

//定制angular.js

var app = angular.module('SesamoApp', []); 

var URL = '/api/projects/torres-de-monterrey/segmentation/'; 

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

$scope.cards = [ 
    {email: '[email protected]', segment: 'low'} 
]; 

$http({ 
    method: 'GET', 
    url: URL 
}).then(function successCallback(response) { 
    // this callback will be called asynchronously 
    // when the response is available 
    /*console.log(response.data);*/ 
    $scope.data = response.data; 

    angular.forEach(response.data, function(value, key){ 
     console.log(key + ': ' + value.email + ' -- ' + value.segment); 
     $scope.cards.push({email: value.email, segment: value.segment}); 
    }); 

    }, function errorCallback(response) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
    }); 

console.log($scope.cards); 

}]);

// list.html

{% extends "base_app.html" %} 
{% block main-container %} 
    <h1>Actividades de hoy</h1> 
    {% if activities %} 
     {% for activity in activities %} 
      {{activity.activity_type}} 
     {% endfor %} 
    {% else %} 
     <p>No tienes actividades programadas para hoy</p> 
     <hr /> 

     <div class="segmentBlocks"> 
      <div ng-app="SesamoApp"> 
       <div class="cards" ng-controller="cardsCtrl"> 
        <div class="card" ng-repeat="card in cards | orderBy:'segment'"> 
         <p class="email">{{ card.email }}</p> 
         <p class="segment">{{ card.segment }}</p> 
        </div> 
        {{ data }} 
       </div> 
      </div> 
     </div> 
    {% endif %} 
{% endblock %}

截图与执行后的结果（无信息）

Screenshot

来源

2016-07-08 Nury Farelo

'的console.log（键+ '：' + value.email + ' - ' + value.segment）;'做它在控制台中重现呢？ – developer033

是的，显示所有信息正确 –

你应该改变你的角度支架{{}}到{$ $}在您app.js.加入这一行

app.config(['$httpProvider', '$interpolateProvider',  function($httpProvider, $interpolateProvider) { 
    $interpolateProvider.startSymbol('{$'); 
    $interpolateProvider.endSymbol('$}'); 
}])

然后做到这一点

<div class="segmentBlocks"> 
     <div ng-app="SesamoApp"> 
      <div class="cards" ng-controller="cardsCtrl"> 
       <div class="card" ng-repeat="card in cards | orderBy:'segment'"> 
        <p class="email">{$ card.email $}</p> 
        <p class="segment">{$ card.segment $}</p> 
       </div> 
       {$ data $} 
      </div> 
     </div> 
    </div>

来源

2016-07-08 02:35:49 aldesabido

在此先感谢您的解决方案完美。非常感谢！！！ –

这可能是作者的骄傲，但我觉得这是对我的答案的低劣解决方案。这是一个不必要的修复，增加了不必要的复杂性，无论如何'ngBind'通常比{{}}更可取。 http://stackoverflow.com/questions/16125872/angularjs-why-ng-bind-is-better-than-in-angular – miyamoto

@miyamoto我从来没有用过ng-bind。要看看这个。谢谢！ – aldesabido

我认为Django模板是将ngRepeat块中的括号解析为Django模板的一部分，而不是将它留给Angular控制器。此处不使用{{}}，为什么不使用ngBind并将ng-bind="card.email"和ng-bind="card.segment"属性添加到您的p标记中？

否则，绕着相关的角度块跳过Django模板，并使用verbatim标签。

来源

2016-07-08 02:16:56 miyamoto

无法显示来自$ http的数据使用angular获取数据，django

回答

相关问题