無法顯示來自$ 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

回答

相關問題