Question

我从数据库中找回客户列表并用它们更新选择列表。

CSHTML：

<select ng-model="model.customerKey" ng-options="customer.Key as customer.Value for customer in model.customers"></select>

控制器方法：

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

我在三种类型的客户中选择了单选按钮

<div class="radio-inline" ng-repeat="customerOption in options">
    <input type="radio" id="{{customerOption.Value}}" name="customer" ng-change="getCustomers(model.customerType)" ng-model="model.customerType" ng-value="customerOption.Key" ng-checked="customerOption.Checked" />{{customerOption.Value}}
</div>

如果我执行上述操作，则列表不会更新，因为角度观察者无法识别列表中的更改。

如何使用方法调用来填充ng-options？

$scope.getCustomers = function (customerType) {
        customerService.get(customerType).then(function (results) {
            return results;
        });

这似乎不起作用：

<select ng-model="model.customerKey" ng-options="customer.Key as customer.Value for customer in getCustomers(customerType)"></select>

任何建议？

Answer 1

简短的回答是你的return语句在错误的范围内

$scope.getCustomers = function (customerType) {
    customerService.get(customerType).then(**function** (results) {
        return results;
    });

return语句是**函数的返回，不是getCustomers（）的返回。我认为以下问题应解决问题：

$scope.getCustomers = function (customerType) {
    return customerService.get(customerType).then(function (results) {
        return results;
    });

此问题的另一个解决方案是在customerType上定义自定义过滤器并使用：

<select ng-model="model.customerKey" 
ng-options="customer.Key as customer.Value for customer in model.customers | customerTypeFilter:selectedType"></select>

过滤器：

angular.module('superCoolFilter')
    .filter('customerTypeFilter', function () {
        return function (objects, selectedType) {

            return objects.filter(function(item){
                return item.customerType == selectedType;
            };
        }
    });

就个人而言，我建议自定义过滤器，因为要避免第二次API调用

Answer 2

所以我认为这是一个范围问题。

您应该考虑使用ng-controller="<ControllerName> as <ThisRef>"

所以在你的控制器中你会做这样的事情：

app.controller('MainCtrl', function() {
   var control = this;
   control.hello = "Hello World";
});

然后在你的HTML中这样：

<body ng-controller="MainCtrl as mc">
   {{mc.hello}}
</body>

在你处理你正在处理的事情之前，目前还不清楚为何更好。

以下是我认为解决您问题的示例： http://plnkr.co/edit/FsSbbmXEPAsNGNwx9HKw?p=preview

请注意，我使用＆＃34; as＆＃34;单词和用法＆＃34; mc＆＃34;访问一切。

我通过将所有内容分配到＆＃34;这个＆＃34;或＆＃34; mc＆＃34;使其更具可读性。

如果您使用该确切代码并将其交换为使用$ scope，则无效。

我希望有所帮助！

如何使用服务方法返回ng-options？

2 个答案: