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

问题在于get函数：

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;
    };

您正在定义customers var，然后发出异步请求并返回尚未定义的客户，因为getProduction()/getTest()/getAll()都是异步的。

您应该让get函数返回一个promise，并根据成功/错误解析内部异步函数：

this.get = function(customerType) {

        var deferred = this.$q.defer();

        var customers;
        if (customerType == "1") {
            getProduction().success(function(result) { return deferred.resolve(result); })
                           .error(function(e) { return deferred.reject(e); });
        } else if (customerType == "2") {
            getTest().success(function(result) { return deferred.resolve(result); })
                     .error(function(e) { return deferred.reject(e); });
        } else {
            getAll().success(function(result) { return deferred.resolve(result); })
                    .error(function(e) { return deferred.reject(e); });
        }
        return deferred.promise;
    };

最后，由于我在.success/.error函数中添加了get，因此您可以将其从每个get***()函数中删除，以便它们看起来像这样：

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

为什么列表没有使用新数据更新？

1 个答案: