简单的角度 ng-repeat 应用程序无法按预期工作答案

【问题标题】：Simple angular ng-repeat app not working as expected简单的角度 ng-repeat 应用程序无法按预期工作
【发布时间】：2016-12-17 09:38:29
【问题描述】：

很确定这是一个愚蠢的问题，我知道这几乎是一个愚蠢的问题。我有一个非常简单的 Angular 应用程序和一些 HTML。

在 chrome 上进行调试时，我可以看到我收到了来自我的 ajax 调用的响应，并且它肯定会填充我的 $scope.courses。然而由于某种原因，它不想工作。试图寻找拼写问题没有成功。

HTML：

<div ng-app="registrationApp" ng-controller="registrationController"  >
    <div class="spacer" ng-repeat="course in courses">
    <label>{{course.Name}}</label>
    </div>
</div>

JS：

    var app = angular.module("registrationApp", []);
    app.controller("registrationController", function ($scope) {
    $scope.firstName = "";
    $scope.lastName = "";
    $scope.cellNumber = "";
    $scope.emailAddress = "";
    $scope.selectCourse = "";
    $scope.courseCategories = [];
    $scope.courses = [];

    $scope.loadCourses = function () {
        var jqxhr = $.ajax("http://localhost/APIWrapper/api/course")
        jqxhr.done(function (response) {
            $scope.courses = response;
        })
        jqxhr.fail(function () {
            alert("error");
        })
        jqxhr.always(function () {

        });
    }

    angular.element(document).ready(function () {
        $scope.loadCourses();
    });

});

回复：

【问题讨论】：

我们能看更多吗？ course.Name 是在哪里定义的？

标签： javascript html angularjs ajax

【解决方案1】：

您是否尝试将$scope.courses = response; 包含在：

$scope.$apply(function(){
   $scope.courses = response;
})

Angular 需要知道何时运行范围摘要。

【讨论】：

最好只以“角度方式”与服务通信。
当然，更好，更简单。我只是发布解决问题的方法。
我同意艾米的观点。我以前不得不使用该解决方案。然而，这很简单，应该开箱即用。

【解决方案2】：

Angular 对 ajax 服务中发生的事情一无所知，因此它不知道更新 UI。尝试改用 $http 或 $resource。 See the Angular tutorial for details.

编辑

只是为了澄清相对于Michał Urbańczyk's 答案，$http 在角度摘要循环内运行，因此当服务返回时 UI 将自动更新。如果你离开 Angular，你必须像 Michal 那样明确地通知 Angular。

但是你可能会在 Angular 之外遇到意想不到的问题，所以除非有令人信服的理由这样做，否则你可能不应该这样做。

【讨论】：

我将 $http 注入到我的应用程序中。不确定那真的是什么。然后我用 '$.http(' 替换了我当前的调用 '$.ajax'。请你能从高层次上向我解释这个概念，也许还有一些额外的文档要链接？
你注意到我回答中的教程链接了吗？
谢谢。我对 $http 和 $resource 或 $.ajax 或我偶然发现的其他一个之间的区别更加好奇。感觉就像我在这里遗漏了一些非常基本的东西。
我一直认为这只是语法不同之类的。我真正不明白的是为什么 $scope.courses 实际上确实收到了数据。按照屏幕截图逐步完成代码后，您可以清楚地看到它已填充。
我觉得$resource应该更高级，更容易使用，但说实话我一般只用$http。 $.ajax 只是在 angular 之外使用原始 jQuery。

【解决方案3】：

在 Angular 中使用 $http 或 $resource 的更好方法。 $http 在内部调用 ajax 调用来获取数据，当我们调用 $http.get(url) 方法时，$http 服务会自动添加某些 HTTP 标头，例如 X-Requested-With: XMLHttpRequest。

html

<body ng-app="registrationApp">
  <div ng-controller="registrationController">
    <ul ng-repeat="course in courses">
      <li>{{course.Name}}</li>
    </ul>
  </div>
</body>

js - 控制器

var app = angular.module("registrationApp", []);

app.controller("registrationController", function($scope, $http) {
  $http.get('http://localhost/APIWrapper/api/course').
    success(function(data, status, headers, config) {
      $scope.courses = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

在您的数据中必须有一个名称字段。

【讨论】：