如何根据AngularJS中的两个下拉列表显示内容?

时间:2016-04-16 06:24:01

标签: javascript jquery angularjs json

我想基于两个下拉列表显示内容。我知道如何根据单个下拉列表中的选项进行更改。请帮我解决这个问题。

这是基于单一下拉列表显示的。我有另一个与Branchwise的下拉列表。我很想过根据CAREER和BRANCHES过滤数据。请帮助

<select ng-model="myVar">
<option value="">CAREER OPTIONS
 <option value="1">HIGHER EDUCATION
  <option value="2">JOBS
  <option value="3">ENTERPRENUERSHIP
</select>

<div ng-switch="myVar">
  <div ng-switch-when="1">
 <h1>H E details</h1>
  </div>
<div ng-switch-when="2">
 <h1>Jobs details</h1>
 </div>
<div ng-switch-when="2">
<h1>Enterprenuership details</h1>
</div>

2 个答案:

答案 0 :(得分:0)

此处工作plnk,根据2 dropdown/select message更改的选择

,这与您所需的完全相同

答案 1 :(得分:0)

在每个部分添加ng-if

<select ng-model="myVar1" ng-change="myVar3 = (myVar1+myVar2)">
    <option value="">CAREER OPTIONS
    <option value="1">HIGHER EDUCATION
    <option value="2">JOBS
    <option value="3">ENTERPRENUERSHIP
</select>

<select ng-model="myVar2" ng-change="myVar3 = (myVar1+myVar2)">
    <option value="">Branch OPTIONS
    <option value="1">Branch 1
    <option value="2">Branch 2
    <option value="3">Branch 3
</select>

<div ng-if="myVar3 ">
    <div ng-if="myVar3 == '11'">
        <h1>H E details</h1>
    </div>
    <div ng-if="myVar3 == '12'">
        <h1>Jobs details</h1>
    </div>
    <div ng-if="myVar3 == '13'">
       <h1>Enterprenuership details</h1>
    </div>
</div>