如果model设置为property,则获取所选对象

时间:2013-10-11 17:45:46

标签: angularjs ng-options

我有以下代码:

<select class="form-control" data-ng-model="form.ProtocolId" data-ng-options="protocol.ProtocolId as protocol.Name for protocol in protocols" required />

协议具有这种结构:

[{ "ProtocolId": 1, "Name": "Protocol 1", "Description": "A description for protocol 1" }]

在$ scope.form中我设置了ProtocolId,这是我提交表单所需要的。但是我想在用户选择它时向用户显示协议的描述。有点像{{selectedProtocol.Description}}。除了我没有selectedProtocol,因为我只选择了id。

有没有办法在这里获得实际选择的协议?我可以编写一个方法来跟踪所选协议的更改,然后在我的控制器中设置form.ProtocolId,但我想知道是否有更简单的方法......

2 个答案:

答案 0 :(得分:0)

我倾向于不将ng-options指令用于select只是因为我通常还想做其他事情......

<select class="form-control" ng-model="form.protocol" required>
    <option ng-repeat="protocol in protocols" value="protocol">{{protocol.Name}}</option>
</select>
<div ng-show="form.protocol.Description">{{form.protocol.Description}}</div>

现在,在进行选择时,使用所选协议的JS对象设置form.protocol。您可以稍后对其进行操作,以便在提交时发送form.protocol.ProtocolID

答案 1 :(得分:0)

所以我将ngRepeat选项标记为答案,但我最终没有使用它有几个原因:主要是由于我的模型结构,我的列表值没有在我的表单中使用angularjs正确填充。然而,DID的工作原理是:

<select class="form-control" data-ng-model="form.PrimaryProtocolId" data-ng-options="protocol.ProtocolId as primaryDisplayName(protocol) for protocol in primaryprotocols" required />

primaryDisplayName()是我的$ scope上的一个方法,它为我提供了我需要的格式:

$scope.primaryProtocolName = function(protocol) {
    return protocol.Name + " (" + protocol.ProtocolType.Name + ")";
};