Question

很确定这是愚蠢的事情，我知道这几乎是一个愚蠢的问题。我有一个非常简单的角度应用程序和一些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();
    });

});

响应：

Answer 1

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

修改

为了澄清相对于Michał Urbańczyk's的答案，$ http在角度摘要循环中运行，因此UI将在服务返回时自动更新。如果你走出Angular之外，你必须明确地通知Angular，正如Michal所做的那样。

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

Answer 2

您是否尝试将$scope.courses = response;括起来：

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

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

Answer 3

更好的方式在角度中使用$ 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
    });
});

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

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

3 个答案: