AngularJS:为什么我的下拉菜单有一个初始的空白条目？

Question

我正在从服务器获取一些 JSON 并使用它来填充组合框。

一个 JSON 条目看起来像这样

    "campaign_id": "2",
    "customer_id": "1",
    "title": "Purple monkey dishwasher",
    "description": "perfectly cromulent",
    "start_time": "19/09/2015 09:42:06",
    "end_time": "19/10/2015 09:42:06"

我宣布我的堕落是明智的

<select name="SelectCampaignForConnections" 
 ng-model="connectionsCampaignDropDown" 
 ng-options="campaign.title for campaign in campaigns"  
 ng-change="ShowConnectionsForCampaign(connectionsCampaignDropDown)">

我初始化选择的模型...

    $http.get(url)   
        .success(function(data, status, headers, config) 
            {
               if ($scope.connections.length > 0)
                   $scope.connectionsCampaignDropDown = $scope.connections[0];

当下拉列表显示时，它包含每个 JSON 条目的 title 元素，但是，它有一个初始空白条目。

我做错了什么？

---

[更新] @sheilak 给出了一个很好的答案:

In order for the dropdown to defaulted to a non-blank value, the value of the variable passed to ng-model must equal one of the options passed to ng-options.

In your case where ng-options is populated by values of campaign.title, it looks like the value passed to ng-model i.e. connectionsCampaignDropDown should be populated with $scope.connections[0].title rather than the whole object $scope.connections[0].

$scope.connectionsCampaignDropDown = $scope.connections[0].title;

但是，我更愿意传递一个完整的对象，而不仅仅是它的一个字段。

这可以做到吗？

(如果不是，那么我将只需要将标题传递给 ng-change 函数 ShowConnectionsForCampaign()，然后它必须循环遍历数据以找到匹配项，这看起来效率很低)

Answer 1

<select name="SelectCampaignForConnections" 
    ng-init="justGiveItAName=getInitialSelection()"
    ng-model="justGiveItAName" 
    ng-options="campaign.title for campaign in campaigns"  
    ng-change="ShowConnectionsForCampaign(justGiveItAName)">

其中 getInitialSelection() 是您范围内的一个函数，如果您需要它可以带一个参数，但在您上面概述的情况下我可能会使用类似这样的东西:

function getInitialSelection() {return connections[0]};

或者直接在ng-init中设置:

ng-init="$scope.connections[0]"

(您可能需要修改上面的代码——我还没有测试过)。

顺便说一句 - 'justGiveItAName' 是一个在其他地方可用的对象。

我现在已经测试过了；有关工作示例，请参阅这些 fiddle :

直接在 ng-init 中设置:http://jsfiddle.net/lukkea/nuo2c3Lk/

在 $scope 上使用函数:http://jsfiddle.net/lukkea/o6strxjf/

传递对象而不是属性(按照 OP 的要求):http://jsfiddle.net/lukkea/fsx8s67j/2/

将对象传入和传回:http://jsfiddle.net/lukkea/ww9yqsrm/3/