Question

好的，首先是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设置模型时，这总是给我一个空白选项作为第一个选项。我读过了 Why does AngularJS include an empty option in select? 和 AngularJS - extra blank option added using ng-repeat in select tag，但它们似乎只适用于顶层的选择（即，不使用ng-repeat内的模型）。我的问题是我需要更新一个嵌套ng-repeat的模型。

编辑：我应该也包含以下代码;这实际上是打破了一切。此代码在设置原始数组后运行：

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

上面的后端调用返回{id：id，：name“name”}形式的对象数组。是的，我可以从服务器端静态填充选择，但我真的想知道如何在一般情况下使这项工作。

Answer 1

由于您在下拉列表的理解表达式中使用了n.id，因此您应该使用offer.network值预先填充id

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

的 Working Demo

angularjs：嵌套的ng-repeat在选择中创建空白值

1 个答案: