CODEWITHSUNDEEP
javascriptangularjsng-show
Detilium
Detilium

Reputation: 3034

AngularJS ng-show doesn't work

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.

Upvotes: 0

Views: 401

Answers (3)

Detilium
Detilium

Reputation: 3034

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.

Upvotes: 0

Tony
Tony

Reputation: 2483

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.

Upvotes: 3

Jeff Clarke
Jeff Clarke

Reputation: 1397

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.

Upvotes: 1

Related Questions