javascript - 在 AngularJS 中编辑表单时如何将 "map"模型值选择框？

Question

我在 AngularJS Controller 中通过查询获取数据:

$scope.customers = xAccount.query();

我正在使用一个选择框来显示带有客户数据的下拉项:

<select type="text"
    data-ng-model="mymodel.customer_id"
    data-ng-options="customer.id as customer.name for customer in customers track by customer.id">
</select>

$scope.customers 显示的数据是这样的:

[
    {"id":"12345678","name":"first customer"},
    {"id":"23456789","name":"second customer"},
    {"id":"34567890","name":"third customer"}
]

我使用的 $scope 模型是:

mymodel.customer_id

现在我可以通过 API 调用获取所有客户，将他们的姓名显示为选择标签，将 ID 显示为选择值，然后将选定的客户保存到数据库中作为 select.value = mymodel.customer_id。这很好用。

不起作用的是“编辑” View /表单。当显示编辑表单(与"new"表单相同)时，选择框获取的值为空。这意味着 mymodel.customer_id 已设置(我可以在 firebug 的 JSON 显示中将其视为类似“12345678”的字符串)但它并未“附加”到 select.value 的形式。我怎样才能做到这一点？

我尝试使用 data-ng-init="mymodel.customer_id = (customers | filter:{id: mymodel.customer_id})[0].name" 但当然失败了。

Answer 1

我以前遇到过类似的问题，我所做的修复是先填充 $scope.customers，然后填充 mymodel.customer_id 中的值.

所以基本上，当您打开编辑表单时，您必须首先通过 $scope.customers = xAccount.query(); 拉取所有客户，然后您可以使用它的 promise 成功回调提取您的客户详细信息。

我没有时间深入研究这个问题，但这对我有用。

考虑到 xAccount 是一个带有 GET 请求的 $resource 实例:

$scope.editCustomer = function() {     // Or whatever is your function when your edit form opens

    // First get all the customers
    $scope.customers = xAccount.query(null, function() {
        // When you successfully get your customer data (success callback)
        // Now here you have to make another call to get your customer
        $scope.mymodel = MyModel.get({id: $routeParams.id});
    });
};

现在，我想说的是，当您打开编辑表单时(我正在考虑调用 editCustomer() 方法，该方法首先获取所有客户数据。在客户数据之后从服务器接收(并绑定(bind)到 HTML 中的 select)，那么只有我们使用 MyModel 获取正在编辑的客户的数据。