Question

我正在使用angular，数据从我的api调用回来。问题是我的列表没有填充。

第一部分：

 <div ng-controller="CustomerController" data-ng-init="init()" class="col-md-2">
    <select ng-model="customerKey" ng-options="customer.Key as customer.Value for customer in customers"></select>
</div>

第二部分：

<div ng-controller="CustomerController">
    <div class="col-md-2 col-md-offset-5" style="outline: 1px solid black; margin-top: 1%">
        <div class="text-center">
            <div class="radio-inline" ng-repeat="customerOption in customerOptions">
                <input type="radio" id="{{customerOption.Value}}" name="customer" ng-change="getCustomers(customerType)" ng-model="customerType" ng-value="customerOption.Key" ng-checked="customerOption.Checked" />{{customerOption.Value}}
            </div>
        </div>
    </div>
</div>

控制器：

var customer = angular.module('customer', []);

customer.controller('CustomerController', [
    "$scope", "customerService",
    function($scope, customerService) {
        $scope.customerOptions = CustomerOptions;

        $scope.getCustomers = function(customerType) {
            $scope.showContent = false;
            customerService.get(customerType).then(function (data) {
                $scope.customers = data;
            });
        };

        $scope.init = function() {
            $scope.getCustomers("1");
        }
    }
]);

服务：

app.service('customerService', [
"$http", function ($http) {
    this.get = function(customerType) {
        var customers;
        if (customerType == "1") {
            getProduction().then(function(result) { customers = result.data; });
        } else if (customerType == "2") {
            getTest().then(function(result) { customers = result.data; });
        } else {
            getAll().then(function(result) { customers = result.data; });
        }
        return customers;
    };

    var getTest = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetTest",
        })
         .success(function (data) {
             return data;
         });
    };

    var getProduction = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetProduction",
        })
         .success(function (data) {
             return data;
         });
    };

    var getAll = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetAll",
        })
         .success(function (data) {
             return data;
         });
    };
    }
]);

如果单击任何单选按钮，它们会将相应的列表返回给服务功能;但是，我无法让选择列表填充该数据

Answer 1

问题是服务正在返回客户对象而不是promise，控制器方法正在寻找。

如果您从服务返回承诺并将成功/错误处理留给控制器，它应该有效。

app.service('customerService', [
  "$http", function ($http) {
   this.get = function(customerType) {
    var customers;
    if (customerType == "1") {
        return getProduction();
    } else if (customerType == "2") {
       return getTest();
    } else {
       return getAll();
    }
};

控制器：

  $scope.getCustomers = function(customerType) {
        $scope.showContent = false;
        customerService.get(customerType).then(function (results) {
            $scope.customers = results.data;
        });
    };

Answer 2

您的customerService then方法中的get()处理程序正在将HTTP调用的结果分配给本地customers变量，但这不会成功。到发生这种情况时，customers已经作为undefined返回给调用者，当您在该值上调用then()时，您很可能会收到错误。

您需要从get()返回一个承诺，then()内的get()处理程序需要包含return个语句：

this.get = function(customerType) {
    if (customerType == "1") {
        return getProduction().then(function(result) { return result.data; });
    } else if (customerType == "2") {
        return getTest().then(function(result) { return result.data; });
    } else {
        return getAll().then(function(result) { return result.data; });
    }
};

这里有相当多的重复，这可以合并：

this.get = function(customerType) {
    var customerPromise = 
        (customerType === "1") ? getProduction()
        : (customerType === "2") ? getTest() : getAll();

    return customerPromise.then(function (result) { return result.data; });
};

为什么这个列表不填充数据？

2 个答案: