我希望使用ng-change或您建议的任何内容来显示/隐藏表单中的元素。这是我的 html :
<div ng-app ng-controller="Controller">
<select ng-model="myDropDown" ng-change="changeState(0)">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<div class="row-container">
first One
<span class="sp-right">
<label>
1
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
<div class="row-container">
second One
<span class="sp-right">
<label>
2
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
例如,我想在用户点击选项1时显示第一个 的 Fiddle
答案 0 :(得分:3)
无需ng-change
,只需使用ng-if
(或ng-show
)来检查模型的状态:
<div class="row-container" ng-if="myDropDown == 'one'">
<div class="row-container" ng-if="myDropDown == 'two'">
Fiddle(正确的结束标记,以便它实际上有效)。
答案 1 :(得分:2)
我会使用ng-switch。如果您想显示div,如果没有选择,则可以使用ng-switch-default
。如果您要默认下面的某个div,请移除ng-switch-when=
并替换它ng-switch-default
<div ng-app ng-controller="Controller" ng-switch on="myDropDown">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<div class="row-container" ng-switch-when="one">
first One
<span class="sp-right">
<label>
1
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
</div>
<div class="row-container" ng-switch-when="two">
second One
<span class="sp-right">
<label>
2
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
</div>
</div>