Question

我不确定我做错了什么，但我的对象并不想在我的局部视图中显示角度重复

SCRIPT

$scope.ExecutivePayList = [];
$scope.LoadExecutivesPay = function () {
    $.get(loadExecutivesPayUrl, function (data) {
        if (data.IsSuccess) {
            //Load data
            $scope.ExecutivePayList.length = 0;
            //$scope.ExecutivePayList = angular.fromJson(data.Results);
            for (var i = 0; i < data.Results.length; i++) {
                $scope.ExecutivePayList.push(data.Results[i])
            }
            console.log($scope.ExecutivePayList);
        }
    });
};

HTML

<tr ng-repeat="executive in ExecutivePayList">
    <td class="">
        {{executive.NameOfIncumbent}}
    </td>
    <td class="">
        {{executive.Position}}
    </td>
    <td class="">
        {{executive.PatersonGrade}}
    </td>
    <td class="text-center">
        {{executive.NumMonthsInPosition}}
    </td>
    <td class="text-center">


    </td>
</tr>

JSON输出

{SectionID: "00000000-0000-0000-0000-000000000000", Results: Array(2), Message: null, IsSuccess: true, DetailedMessage: null}
Results: Array(2)
0:{SectionID: "b8e6466e-44b8-4a47-bdc6-a84e07200780", NameOfIncumbent: "Daily M", Position: "CEO", PatersonGrade: "", NumMonthsInPosition: 12}
1:{SectionID: "2290a579-7f86-437f-a806-36049eeb7c8b", NameOfIncumbent: "Field RH", Position: "CEO", PatersonGrade: "", NumMonthsInPosition: 12}

不确定这是否有用，但我在ng-init上调用我的方法

<div ng-controller="ExecutivePayController" ng-init="LoadExecutivesPay()">

Answer 1

首先，由于您没有使用有角度的方式进行AJAX调用，因此您需要调用angular.fromJson(data.Results)。此外，由于这是一个异步操作，您必须手动触发摘要周期。因此，您必须在更新$scope.$apply()后立即致电$scope.ExecutivePayList。

最终代码：

$scope.ExecutivePayList = [];
$scope.LoadExecutivesPay = function () {
    $.get(loadExecutivesPayUrl, function (data) {
        if (data.IsSuccess) {
            //Load data
            $scope.ExecutivePayList.length = 0;
            $scope.ExecutivePayList = angular.fromJson(data.Results);
            for (var i = 0; i < data.Results.length; i++) {
                $scope.ExecutivePayList.push(data.Results[i])
            }
            console.log($scope.ExecutivePayList);
            $scope.$apply(); // Here you trigger the digest cycle.
        }
    });
};

以角度方式更新如何执行此操作。

建议您使用service进行http呼叫，而不是像现在一样在控制器中执行。在任何情况下，您必须在服务或控制器（当前案例）中注入$http。然后您的控制器功能应如下所示：

$scope.LoadExectivesPayUrl = function() {
   $http.get(loadExecutivesPayUrl).then((data) => {
      if(data.IsSuccess) {
            //Load data
            $scope.ExecutivePayList.length = 0;

            //No need to parse json because angular has done this automatically 
            //for you

            for (var i = 0; i < data.Results.length; i++) {
                $scope.ExecutivePayList.push(data.Results[i])
            }
            console.log($scope.ExecutivePayList);
            // No need to $scope.$apply() , since digest cycle is performed 
            // within $http operation
      }
   })
}

Answer 2

首先，您要检查if (data.IsSuccess) {并且您的输出没有。

其次，您正在使用data.Results.length;。此外，结果不存在。

列表对象不使用ng-repeat显示

2 个答案: