I have the following code:
<header class="hero-unit" id="banner" ng-include="'components/header/header.html'"></header>
<div ng-include="'components/navbar/navbar.html'"></div>
<div class="container">
<h3 class="site-headline">Opret nyt produkt</h3> <hr>
<form>
<div class="container jumbotron">
<div class="col-md-12">
<select ng-model="selectedOption">
<option ng-repeat="option in options">
{{ option.name }}
</option>
</select>
</div>
<div ng-show="selectedOption.name == Pool" ng-include="'components/new/new-pool.html'">test</div>
</div>
</form>
</div>
<footer class="footer" ng-include="'components/footer/footer.html'"></footer>
And I'm trying to show the ng-include whenever selectedOption == "Pool"
, but the ng-include is being shown even though the ng-show condition isn't true.
I've tried with " ==='Pool'"
and without the '
, but nothing seems to work, and I can't wrap my head around it.
You're comparing selectedOption.name == Pool
, which happens to be undefined == undefined
. Because of how you set up your ng-select
you just want to compare:
selectedOption === 'Pool'
See this simple plunk .
Either make your model for the select
to be selectedOption.name
or your conditional to be ng-show="selectedOption == 'Pool'"
Your conditional is looking for a different variable than you've set for the select
( selectedOption
vs. selectedOption.name
). (also note the quotes around 'Pool')
And I'm not sure but you might need to give your option
elements a value.
I managed to find my problem
Somehow, I managed to create a space so it didn't say
Pool
But it said
Pool
Changing from this:
<option ng-repeat="option in options">
{{ option.name }}
</option>
To this:
<option ng-repeat="option in options">{{ option.name }}</option>
Solved my problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.