Question

我真的不知道如何说出这个问题。使用角度。无论如何，当用户在文本框中键入一个状态时，我试图拥有它，一旦验证状态存在（与所有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，并且我希望它完成，无需他们按Enter或提交。

在键盘上，它运行检查功能。因此，例如，一旦输入Maryland，getJson将运行并正确记录数据，但$ scope.items不会更新，直到我输入状态后再键入一个键

所以喜欢打字：

M-A-R-Y-L-A-N-D（控制台正确记录JSON对象，但HTML {{items}}仍然没有显示） - any_key_here （现在已经更新）

感谢您的帮助。

编辑：

所以我可以通过使用JSON函数中的数据调用另一个函数来获得它。

 myFunction(data);

调用

function myFunction(items) { 

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

};

Answer 1

你正在使用jQuery的ajax方法，它没有与angular集成以在完成时通知angular。最好使用内置$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;
  });

$ .getJson在事件

1 个答案: