How can i use values from ng-model for ng-show?

Question

i'm a newb in angular and have some trouble to figure out how to use the values from ng-model in the correct way.
I made two drop-down lists and want to create a dependence between these two. The second list shall be displayed, depending on the user input of the first. In this case the user shall select the kind of fermentation of a beer (here Obergärig for top-fermented) and the second drop-down should only be shown if the user took 'Obergärig'. I tried it with ng-show, but it doesn't work and i have no idea why or even if i use it the right way. I would be very thankful if someone could give me a short explanation what i'm doing wrong.

Html for the first drop-down:

<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>

Html for the second drop-down:

<div ng-controller="OberController" ng-show="Bierart == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>

And here's the .js:

app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];});

app.controller("OberController", function($scope) {
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});

That's my first post here, so i'm thankful for every advise to improve the quality of this post. Also, please excuse my bad english.

I think that the only way is to have both selects in the same controller. — jcubic, Jan 12 '16 at 13:41
Or share an ancestor controller. You may also accomplish what you want by using a service where changing the value of ` — adam-beck, Jan 12 '16 at 13:43

score 0 · Answer 1 · answered Jan 12 '16 at 13:59

Your selects have to be managed by one controller. So, your code should look like:

<div ng-controller="BierController">
    <select ng-model="Bierart" ng-options="art as art.name for art in arten">
        <option value="" disabled selected>Gärigkeit auswählen</option>
    </select>
    <div ng-show="Bierart === 'Obergärig'">
        <select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
            <option value="" disabled selected>Biersorte auswählen</option>
        </select>
    </div>
</div>

.js:

app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];

$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});

score 0 · Accepted Answer · answered Jan 12 '16 at 13:59

0

Just do the next steps:

Use the same controller for both selects.
Create some $scope variable to save the condition of the first select.(e.g. $scope.selectedBeer)
Set the condition i ng-show property of the second select.

Example:

JS file:

app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];

$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];

$scope.selectedBeer = "";
});

HTML file:

<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>

<div ng-controller="BierController" ng-show="selectedBeer == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>

I may have done some syntax mistakes as I was coding this without any IDE, but the main idea is described. Good luck!

answered Jan 12 '16 at 13:59

Роман Карпінський

12
1

At first, thanks to everyone who responded to my question. You all helped me a lot to understand how this Inception-like stuff with 'Controller in Controller' works. I followed your advises and puted the selects together in one controller and added a $scope that keeps the value of the ng-model. if i add a {{selectedBeer}} he shows me the content 'Obergärig', So this works fine, but for some reason he won't show me the second drop-down if i use the ng-show="selectedBeer == 'Obergärig'". Maybe any suggestions what could be wrong? – leckerBier Jan 12 '16 at 15:39
I would advise you to use ng-inspector Chrome extension to debug AngularJS applications. There you can see all the values of your scope variables as well as controls model values. – Роман Карпінський Jan 12 '16 at 17:01
Could you please provide the code to get a better understanding of the problem? – Роман Карпінський Jan 12 '16 at 17:02

score 0 · Answer 3 · answered Jan 12 '16 at 17:16

Here's the new html:

<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
                            <option value="" disabled selected>Gärigkeit auswählen</option>
                        </select>
                        </br>
                        {{selectedBeer.name}} 


                <div  ng-show="selectedBeer == 'Obergärig'">
                    <select ng-options="sorte as sorte.name for sorte in obere">
                        <option value="" disabled selected>Biersorte auswählen</option>
                    </select>
                    </br>
                    {{selectedBeer.name}}
                </div>

And the .js

app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];

$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];

$scope.selectedBeer = "";
});

Thanks for the advise, i'll install ng-inspect FF.

Well... got it... Just did this:
and it works. *forehead slap* — leckerBier, Jan 13 '16 at 14:44

How can i use values from ng-model for ng-show?

3 Answers3