我试图用角构造一个公式,但在选择元素中显示数据不起作用...
formulary.cs.html:
<table style="display: inline-block; float: left; max-width: 510px;">
<tr data-ng-repeat="question in group.questions">
<td>{{question.name}}</td>
<td>
<div ng-switch on="question.control" style="display: inline-block;">
<div ng-switch-when="input">
<input type="text" style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" placeholder="{{question.default_value}}" maxlength="{{question.max_length}}" />
</div>
<div ng-switch-when="textarea">
<textarea style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" placeholder="{{question.default_value}}"></textarea>
</div>
<div ng-switch-when="checkbox">
<input type="checkbox" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" />{{question.default_value}}
</div>
//MY PROBLEM HERE !
<div ng-switch-when="select">
<select style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}">
<option ng-repeat="choice in question.default_value" value="{{choice.value}}">{{choice.name}}</option>
</select>
<select style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" ng-model="question" ng-options="choice.value for choice in question.default_value">
</select>
</div>
<div ng-switch-when="p">
<p style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}"><b>{{question.default_value}}</b></p>
</div>
<div ng-switch-default>
<!-- default action -->
</div>
</div>
</td>
<td>
<div ng-if="question.unity_variable == true">
<select>
<option ng-repeat="unit in question.unity">{{unit.value}}</option>
</select>
</div>
<div ng-if="!question.unity_variable">
{{question.unity}}
</div>
</td>
</tr>
</table>
我看过使用AngularJS,如何将<select>元素绑定到通过服务更新的属性
在我的浏览器中,显示标签,但不显示选择中的选项。
在左侧,方法:
<select style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" ng-model="question" ng-options="choice.value for choice in question.default_value">
</select>
在右侧,方法:
<select style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}">
<option ng-repeat="choice in question.default_value" value="{{choice.value}}">{{choice.name}}</option>
</select>
请您能帮我发现我的错误吗?谢谢
请勿ng-repeat
与一起使用select/option
。此处描述的正确用法是:
<select ng-model="form.question"
ng-options="choice.value as choice.name for choice in question.default_value">
</select>
为了使所选选项正确显示,choice.value
零件必须等于定义的值ng-model
(在上一个示例中form.question
)。我不知道您的模型,让我们考虑一下:
question.default_value = [
{name: "Alpha", value: "a"},
{name: "Beta", value: "b"}
];
如果为form.question === "a"
,则选择第一个选项。如果form.question === "b"
第二,依此类推。您可以选择整个对象:
<select ng-model="form.question"
ng-options="choice.name for choice in question.default_value">
</select>
在这种情况下,将form.question
as初始化为:
form.question = question.default_value[0];
// the index, in this example 0, is that of the selected element
在这种情况下,对象必须等于===
; 不足以使其属性匹配。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句