getJSON和角度模型

我被卡住了。不知何故，我無法得到這個工作。我嘗試從一個（仍然是本地的）JSON文件加載一個Web應用程序的數據。這個JSON的部分包含的顏色，看起來像這樣： getJSON和角度模型

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

我有一些東西，頭一個非常基本的HTML文件。 Scipts被加載到標題中。有趣的部分是這樣的：

<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顯示正確的解析。在調試控制檯上，顏色和res.colors看起來一樣。但是頁面上的列表沒有更新。

我想這是時間的東西，但我不確定。有人能指出我正確的方向嗎？

來源

2017-01-09 Oliver

你可以試試'.done'來代替你的'.then'嗎？ –

使用'$ http.get'而不是'jQuery' ajax –

jQuery的getJSON在角度的摘要循環之外執行，因此視圖在您的ajax調用的then中不會更新。如果你是你的$範圍變量賦值後添加與$scope.$apply()線，視圖將更新（見plunker：https://plnkr.co/edit/HLSYl0pI2AZ15qf5T5WM?p=preview）

我建議什麼，雖然是用角的本地$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'] 
    }) 
})

來源

2017-01-09 13:37:40 Fissio

將容易使用'.success'代替'.then'，因爲我個人遇到了一些問題'.then' –

。然後被棄用少數建立回來（見http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6） - 你遇到什麼樣的問題。然後？ – Fissio

是的。當我們嘗試使用'$ http'函數訪問本地'.json'文件時，雖然調用成功，但內容並不呈現。 –

嘗試使用$超時。

.then(function(res){ 
    $timeout(function (res) { 
    // your code 
    }, 0); 
})

它將強制角度更新$範圍。

來源

2017-01-09 13:42:24 Oksid

getJSON和角度模型

回答

相關問題