使用angularjs更改HTML div内容

时间:2018-01-10 14:46:04

标签: html angularjs

Angularjs 代码,用于显示选择div内容

 <select>
         <option value="0">--Select--</option>
         <option value="1">Individual</option>
         <option value="2">Business</option>
         <option value="3">Others</option>
    </select>

如果选择个人选项,则必须显示 div内容

<div id="individual">
.
.
.
</div>

如果选择商家选项,则必须显示 div内容

<div id="bussiness">
.
.
.
</div>

如果选择其他选项,则必须显示 div内容

<div id="others">
.
.
.
</div>

***任何人都会向我推荐任何教程或链接

1 个答案:

答案 0 :(得分:0)

使用ng-model存储所选值

<select ng-model="selectedVal">
         <option value="0">--Select--</option>
         <option value="1">Individual</option>
         <option value="2">Business</option>
         <option value="3">Others</option>
</select>

然后使用ng-switch相应地显示div

<div ng-switch="selectedVal">
  <div ng-switch-when="1" id="individual">...</div>
  <div ng-switch-when="2" id="bussiness">...</div>
  <div ng-switch-when="3" id="Others">...</div>
  <div ng-switch-default>...</div>
</div>

检查工作小提琴here