我有以下代码:
<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,但我想知道是否有更简单的方法......
答案 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 + ")";
};