CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Theunis
Theunis

Reputation: 338

Angular option select show hide Angular repeat

I hope I can explain this in a easy way:

I have the following code

<select>
  <option ng-repeat="bankDetail in profile.bankDetails" value="{{bankDetail.bankDetailNumber}}"> {{bankDetail.bankName}}</option>
</select>`

<div ng-repeat="bankDetail in profile.bankDetails">
      {{bankDetailName}}
</div>

According to the value selected in the dropdown I want to show and hide the second div.

For the life of me I can't find any example of this type of code.

Currently it is showing all of the values in the second div, I want the first one to show and then hide/show the rest depending on the drop down input change.

Any help will be appreciated.

Upvotes: 0

Views: 817

Answers (3)

Satbir Singh
Satbir Singh

Reputation: 141

Here is the solution for our problem.

Try this below fiddle and you will find your solution.

http://jsfiddle.net/HB7LU/19314/

You have to use ng-options in this case as I have used.

 <select ng-model="selection" ng-options="obj as obj.Name for obj in someArray">

`

Let me know if you find any difficulty in this. Would love to help.

Upvotes: 1

user1399844
user1399844

Reputation:

I think you should use something like:

<select ng-model="selectModel">
  <option ng-repeat="bankDetail in profile.bankDetails" ng-value="{{bankDetail.bankDetailNumber}}"> {{bankDetail.bankName}}</option>
</select>`

<div ng-repeat="bankDetail in profile.bankDetails"
     ng-if="selectModel === bankDetailName">
      {{bankDetailName}}
</div>

The thing works like that, if the select value is the same with the bankDetailName (I think you have something like bankDetail.name not bankDetailName) then display the div.

Instead of ng-if you can use ng-show.

Upvotes: 1

Stefan Filip
Stefan Filip

Reputation: 1801

You mean something like this?

<select ng-model="selection" ng-init="selection=profile.bankDetails[0]">
  <option ng-repeat="bankDetail in profile.bankDetails" ng-value="bankDetail"> {{bankDetail.bankName}}</option>
</select>`

<div>
   {{selection.bankName}}
</div>

Upvotes: 1

Related Questions