Question

我从服务器（Node.js）输出我的JSON到NGrepeat时出现问题。

我已经尝试了很多并使用Firebug和Firefox Web Inspector进行了调试。

由于某种原因，它不会显示来自JSON的数据，即使在我在Firebug控制台（使用Firefox 39.0）中输出JSON时，JSON看起来也是正确的。

screenshot

JSON：

[{ nr:"1", svenska:"test2", spanska:"testo2"},{ nr:"2", svenska:"test3", spanska:"testo3"},{ nr:"3", svenska:"test4", spanska:"testo4"},{ nr:"4", svenska:"test5", spanska:"testo5"},{ nr:"5", svenska:"test6", spanska:"testo6"}]

Angular.js

    /**
     *
     * The client Angular.JS main file for the project
     */


    var glosorApp = angular.module('glosorApp',['directives']);   /* */


    angular.module('directives', [])
    .directive('toggleClass', function () {
    var directiveDefinitionObject = {
        restrict: 'A',
        template: '<div ng-click="localFunction()" ng-class="selected"    ng-transclude></div>',
        replace: false,
        scope: {
            model: '='
        },
        transclude: true,
        link: function (scope, element, attrs) {
            scope.localFunction = function () {
                scope.model.value = scope.$id;
            };
            scope.$watch('model.value', function () {
                if (scope.model.value === scope.$id) {
                    scope.selected = "active";
                } else {
                    scope.selected = '';
                }
            });
        }
    };
    return directiveDefinitionObject;
    });




    glosorApp.controller('listController', function ($scope, $http) {

       $http.post(PROJEKT_SOKVAG+'/_myroute', 
                    {type:AJAX.LISTA_GLOSOR_CLI_R}).success( function(data) {

                                console.log("Kommer hit lookdeep: "+lookdeep(data.data));   


                                $scope.glosor = data.data;
                        //      $scope.$apply();                                                    

                                console.log("Kommer hit lookdeep: $scope.glosor "+lookdeep($scope.glosor)); 

                        });       

    });





function ajaxanrop(callback, data_) {
     $.ajax({
            url: PROJEKT_SOKVAG+'_myroute',
            type: 'POST',
            dataType: 'json',
            data: data_ ,      // the data that should be sent to server
            success: function(data) { if ( callback ) callback(data); },
            error: function() { if ( callback ) callback(null); },
            complete: function() { /* console.log("Klart"); */ } 
      });   

    }

HTML（EJS模板）

<!DOCTYPE html>
<html ng-app="glosorApp" ng-init="model = { value: 'dsf'}">
<head>
<title>Glosor</title>

<script type="text/javascript">
var PROJEKT_SOKVAG="<%=project_path %>", LoginUser="<%= user.username %>";
</script>
<script type="text/javascript" src="http://w42.se/webbroot/js/jquery-1.9.1.min.js"></script>
<script src="http://w42.se/<%=project_path %>/jquery-ui-1.js" type="text/javascript"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>    

<script type="text/javascript" src="http://w42.se<%=project_path %>/lookdeep.js"></script>
<script type="text/javascript" src="http://w42.se<%=project_path %>/constants.js"></script>
<script type="text/javascript" src="http://w42.se<%=project_path %>/clientAngular.js"></script>

</head>
<body>
<div id="vald_sida" style="display:none;" class="mentorer"></div>
<p>Anv&auml;ndarnamn: <%= user.username %></p>
<p>Email: <%= user.email %></p>

<p><a href="<%=project_path %>/_logout">Log out</a></p>

    <div id="wrapper"  ng-controller="listController" >

    <p><a href="<%=project_path %>/_laggtillglosor">L&auml;gg till Glosor</a></p>
    <p><a href="<%=project_path %>/_account">Testa Glosor</a></p>       

    <div class="clear"></div>


    <div class="list">

        <div class="filterarea">
        <h4>S&ouml;kning</h4>
            <div>       
                    <span>Nr: <input ng-model="search.nr" ng-model-options="{debounce: 20000}"></span>
                    <span>Svenska: <input ng-model="search.svenska" ng-model-options="{debounce: 20000}"></span>
                    <span>Spanske: <input ng-model="search.spanska" ng-model-options="{debounce: 20000}"></span>
                    <span>Po&auml;ng: <input ng-model="search.poang" ng-model-options="{debounce: 20000}"></span>

            </div>

        </div>
            <div class="pad clearfix">          
                <h4>Resultat</h4>       

                V&auml;lj: alla <input type="checkbox" ng-model="master"><br/> 
                  <div ng-form="">
                <div class="list">
                        <div class="thead">
                            <div>
                                <span class="sortable"><a href="" 
                                ng-click="predicate = 'nr'; reverse=!reverse">#</a></span>  
                                <span class="sortable td"><a href="" 
                                ng-click="predicate = 'svenska'; reverse=!reverse">Svenska</a></span>
                                <span class="sortable td"><a href="" 
                                ng-click="predicate = 'spanska'; reverse=!reverse">Spanska</a></span>
                                <span class="sortable td"><a href="" 
                                ng-click="predicate = 'poang'; reverse=!reverse">Po&auml;ng</a></span>                                              
                            </div>
                        </div>

                        <div class="tbody">             
                            <div ng-repeat="glosa in filter_glosor = (glosor | orderBy:predicate:reverse | filter:search)">                      
                                    <div class="tr" toggle-class="" model="model">                  
                                    <span class="td">{{glosor.nr}}</span>  
                                    <span class="td">{{glosor.svenska}}</span>
                                    <span class="td">{{glosor.spanska}}</span>  
</body>
</html>

Answer 1

对于ng-repeat问题，您似乎错误地使用了过滤器。试试这个：

<div ng-repeat="glosa in glosor | orderBy:predicate:reverse | filter:search">

NB 如果您尝试获取数据，则应使用$http.get代替您拥有的$http.post(PROJEKT_SOKVAG+'/_myroute',。

在维护应用程序时，它将减少混乱。

Answer 2

好吧，我发现了我犯的错误，这是一个非常简单的错误。实际上相当尴尬......; - ）

我在重复的块中（在NGRepeat内）放了glosor.svenska而不是glosa.svenska。

使用数组名称和元素名称太相似是件坏事，你可能会混淆它们。

这意味着我将数组而不是重复的单个数组元素放在重复的块中。

NGRepeat的AJAX（JSON）问题

2 个答案: