javascript - getJSON 和 Angular 模型

标签 javascript angularjs json

我被困住了。不知怎的,我无法让这个工作。我尝试从(仍然是本地的)JSON 文件加载 Web 应用程序的数据。此 JSON 的一部分包含颜色,如下所示:

{
  "colors" : {
    "1" : "yellow",
    "2" : "green",
    "3" : "red"
  },
  "stuff : {...}
}

我有一个非常基本的 HTML 文件,其中包含一些 header 内容。脚本加载在 header 中。有趣的部分如下所示:

<ul  ng-controller="ColorController">
  <li ng-repeat="(key,value) in colors" value="{{key}}">
    {{key}}: {{value}}
  </li>
</ul>

对应的Javascript:

var colors = {
    "1": "lyellow",
    "2": "lgreen",
    "3": "lred"
};

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

app.controller('ColorController', function($scope){

    $scope.colors = colors;

    $.getJSON('data.json')
        .then(function(res){
            $scope.colors = res.colors;
        });
})

我首先尝试使用本地版本的颜色,因此变量颜色。效果很好并产生了所需的输出。我尝试切换到本地存储的 JSON。 console.log 显示了正确的解析。在调试控制台上,colorsres.colors 看起来相同。但页面上的列表并未更新。

我猜这与时间有关,但我不确定。有人能指出我正确的方向吗?

最佳答案

jQuery 的 getJSON 是在 Angular 的摘要循环之外执行的,因此 View 不会在 ajax 调用的 then then 中更新。如果您要在 $scope 变量赋值后添加一行 $scope.$apply() , View 将会更新(请参阅 plunker: https://plnkr.co/edit/HLSYl0pI2AZ15qf5T5WM?p=preview )

不过,我建议使用 Angular 的 native $http.get 来获取 JSON。例如,请参阅此处的 plunker:https://plnkr.co/edit/F7e5ECYbl91mYhF3g848?p=preview

angular.module('test', [])
.controller('testCtrl', function($scope, $http) {
  $http.get('colors.json')
  .then(function(response) {
    $scope.colors = response.data['colors']
  })
})

关于javascript - getJSON 和 Angular 模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41549149/

相关文章:

c# - 使用 JSON 将数据存储在文本文件中

javascript - 如何使用 JavaScript 对 SQLite 执行批量插入?我使用的是phonegap+sencha框架

javascript - Web Api 2 的 Angular 资源设置

javascript - 从 Angular 服务/工厂链接和返回数组的问题

javascript - 在 ng-options 中将 C# dateTime 格式化为 AngularJS 日期

javascript - 从 reviver 访问 JSON 对象中的数组

javascript - 如何从 Javascript 进行成功的 JSON 调用

javascript - 创建新时如何检索模型ID?

javascript - 如何在 FullCalendar 中保存事件

javascript - Angular-in-memory-web-api 中多个集合出现错误 404