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

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