$ .getJson不會影響視圖，直到事件發生

真的不知道如何說出問題。使用角度。無論如何，我想這樣做，當用戶在文本框中輸入一個狀態時，一旦它已經被驗證狀態存在（與所有50個數組相比），它會自動調用一個getJSon Jquery請求JSON對象。但由於某種原因，它不會立即執行，而是我必須在按下鍵後再按下一個鍵。

代碼：

$scope.checkState = function(team) { 
    //check for team 
    console.log("Searching for " + document.getElementById('team').value) 

    var teamFind = document.getElementById('team').value; 
    var team = $.inArray(teamFind, $scope.states); 
    console.log("team: " + team); 

    if (team == -1) 
    { 
     console.log("Not found"); 
     $scope.selectedState = "Not Found"; 
     teamFound = false; 
    } 
    //correct team 
    if (team > -1) 
    { 
     $.getJSON('https://api.myjson.com/bins/1ak21r', function (data) { 
      //console.log(data.bowl); 
      $scope.items = data; 
      console.log($scope.items); 
       console.log("Team Bowl: " + team_bowl) 
     console.log("Found: " + $scope.states[team]); 
     $scope.selectedState = $scope.states[team]; 
     teamFound = true; 
     }); 

    } 

}

HTML代碼

<p class="w3-large w3-center"> 
     <input type="text" name="team" id="team" value="Whats Your Team?" ng-keyup="checkState(team)"> 
    </p> 
    <p class="w3-jumbo w3-center"> 
    <span id="bowl">{{ selectedState }}</span> 
</p> 
<p class="w3-large w3-center"> 
<span>f{{ items }}</span> 
</p> 

</div>

我知道這可能是很難理解我想要什麼，但我創建一個示例應用程序，它會顯示什麼碗比賽隊參與競爭。用戶在下面的文本框id = team中鍵入團隊，並且我希望完成而不必按下輸入或提交。

在鍵盤上，它運行檢查功能。例如，一旦進入Maryland，getJson將運行並正確記錄數據，但$ scope.items不會更新，直到我在鍵入一個更多的鍵之後纔會更新，之後我進入狀態

所以，像輸入：

馬里蘭（控制檯日誌JSON對象正確，但對HTML {{項目}}仍顯示NOTHING） - any_key_here（現在它被更新）

感謝您的幫助。

編輯：

所以我能夠具有其它功能與JSON函數裏面的數據被調用，以得到它。

myFunction(data);

這就要求

function myFunction(items) { 

console.log(items); 
document.getElementById('bowl2').innerHTML = items.team; 

};

來源

2016-12-28 JimmySmithJR

做**不**直接與角度使用jQuery的阿賈克斯。對於這種情況，angular提供了可以注入的['$ http']（https://docs.angularjs.org/api/ng/service/$http）。 '$ http'與jQuery的ajax非常相似（實際上，如果jQuery在那裏，它會包裝/用戶jQuery，但是會做一些你缺少的東西） – TheSharpieOne

您正在使用jQuery的不與角度進行集成，當它完成通知角AJAX方法。最好使用建立在$http方法中的角度，這些方法在完成它們時會執行相同的操作，並觸發摘要循環來更新視圖。

您需要將$http注入您的控制器或服務（取決於代碼的位置）才能使用它。一旦你這樣做了，你應該能夠對你的代碼進行如下修改。

變化

$.getJSON('https://api.myjson.com/bins/1ak21r', function (data) { 
     //console.log(data.bowl); 
     $scope.items = data; 
     console.log($scope.items); 
      console.log("Team Bowl: " + team_bowl) 
    console.log("Found: " + $scope.states[team]); 
    $scope.selectedState = $scope.states[team]; 
    teamFound = true; 
    });

到

$http.get('https://api.myjson.com/bins/1ak21r') 
    .then(function (response) { 
    var data = response.data; 
    //console.log(data.bowl); 
    $scope.items = data; 
    console.log($scope.items); 
    console.log("Team Bowl: " + team_bowl) 
    console.log("Found: " + $scope.states[team]); 
    $scope.selectedState = $scope.states[team]; 
    teamFound = true; 
    });

來源

2016-12-28 21:40:51 TheSharpieOne

$ .getJson不會影響視圖，直到事件發生

回答

相關問題