当前位置: 代码迷 >> JavaScript >> Ng-repeat没有在Flask应用程序中显示我的物品。
  详细解决方案

Ng-repeat没有在Flask应用程序中显示我的物品。

热度:98   发布时间:2023-06-05 09:27:36.0

ng-repeat使我的代码崩溃。 当我使用{{item.Title}}我的应用程序消失了。 当我使用{{ item }}运行我的应用程序时,HTML标记内出现空白。

<div class="container" ng-app="App"  > 

            <div ng-controller="MainCtrl">

                <div ng-repeat="item in resources" >  

                 <p> {{ item }}  </p> 

                </div> 
        </div>  
</div>

在控制器中:

$scope.resources =  [
                      {
                        "Category":"A",
                        "Topic":"U",
                        "Age":"2",
                        "Title":"13"
                      },
                      {
                        "Category":"A",
                        "Topic":"U",
                        "Age":"3",
                        "Title":"12"
                      }
                      ]

控制器代码如下:

var App = angular.module('App', ['$http']);
console.log(989)


App.controller('MainCtrl', ['$scope', '$http', 
    function($scope, $http) {
        console.log(123456789876543456789)      
        $http.get('../static/js/data.json').success(function(data) {
            $scope.resources = data;

// console.log($scope)
// console.log($scope.resources)
      });
}]);

这是一个使用了偏子的Flask应用程序。问题的根源是双卷曲。 解决了!

您必须使用{{resources.title}}进行绑定

我已经创建了JS小提琴,并且按预期工作,请看一下我的

angular.module("App", []).controller('MainCtrl', function ($scope) {
    $scope.resources = [{
        "Category": "A",
            "Topic": "U",
            "Age": "2",
            "Title": "13"
    }, {
        "Category": "A",
            "Topic": "U",
            "Age": "3",
            "Title": "12"
    }]
});

$http.get('../static/js/data.json').success(function(data) {
            $scope.resources = data;
            $scope.$apply();
      });

这个解决方案对我有用

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

app.controller('MainCtrl', 
      function($scope, $http) {   
        $http.get('../static/js/data.json').success(function(data) {
            $scope.resources = data;
      }); 
});

data.json文件的内容如下所示

[
    {
        "Category":"A",
        "Topic":"U",
        "Age":"2",
        "Title":"13"
    },
    {
        "Category":"A",
        "Topic":"U",
        "Age":"3",
        "Title":"12"
    }
]

Item是一个对象,p标签想要显示一个字符串。 试试看

<p>{{item.title}}</p> 

解决方案是:

{% raw %}

item.Title

{% endraw %}
  相关解决方案