angularjs:嵌套ng重复在选择中创建空白值

angularjs: nested ng-repeat creates blank values in selects

本文关键字：选择 创建 空白 嵌套 ng angularjs      更新时间：2023-09-26

好的，首先是Javascript的简化部分：

//the network values below are later dynamically 
//reloaded at runtime from a remote API
$scope.networks =  [{id: 5, name: "Network 1"}];
$scope.campaign = {
    paths: [
        {offers: [
             {name: "Site1",
              network: $scope.networks[0],
              uri: "http://uri1.com"},
             {name: "Site2",
              network: $scope.networks[0],
              uri: "http://uri2.com"}]}]};

以及HTML的相关部分：

<div ng-repeat "path in campaign.paths">
   <div ng-repeat="offer in path.offers">
       <input type="text" ng-model="offer.name" />
       <input type="text" ng-model="offer.uri" />
       <select ng-model="offer.network"
           ng-options="n.id as n.name for n in networks">
       </select>
   </div>
</div>

问题是，每当我尝试将的模型设置为offer.network时，这总是给我一个空白选项作为第一个选项。我读过为什么AngularJS在select中包含一个空选项？和AngularJS-在select标记中使用ng repeat添加了额外的空白选项，但它们似乎只适用于顶级的选择（即，不使用ng repay中的模型）。我的问题是，我需要更新一个嵌套ng重复的模型。

编辑：我应该还包括以下代码；这就是真正打破一切的原因。此代码在设置原始数组后运行:

$scope.getNetworks = function () {
    $http.get('/api/networks/nameid'
             ).success(function (data, status, headers, config) {
                 $scope.networks = data;
             });
};
$scope.getNetworks();

上面的后端调用返回形式为｛id:id，：name"name"｝的对象数组。是的，我可以从服务器端静态地填充select，但我真的很想知道如何在一般情况下实现这一点。

因为在下拉列表的理解表达式中使用了n.id，所以应该像下面的一样用id值预填充offer.network

network: $scope.networks[0].id

由于数据是动态填充的，因此可以执行类似的操作。（为了演示的目的，我只是用一种非常愚蠢的方式来填充值。但你明白了。）

$scope.getNetworks().then(function(data){
    $scope.networks = data;
    //populate the default value
    $scope.campaign.paths[0].offers[0].network = $scope.networks[0].id;
    $scope.campaign.paths[0].offers[1].network = $scope.networks[0].id;
})

工作演示

相关文章：