如何使用ng-if或ng-show使md-select移除（隐藏）？

Question

I am trying to make a md-select removed or hide when a checkbox is not checked. I have tired both ng-if or ng-show, but once the md-select is displayed, it cannot be removed or hide. My code is as follows:

Using ng-if:

<md-checkbox ng-model="checked" ng-true-value="'true'" ng-false-value="'false'">
Add Dependency
</md-checkbox>

<p>Checkbox value: {{ checked }}</p>
<md-select  placeholder="Dependency" ng-model="test" style="min-width: 300px;" ng-if ="checked">
<md-option>testOption1</md-option>
<md-option>testOption2</md-option>
<md-option>testOption3</md-option>
</md-select>

Using ng-show

<md-checkbox ng-model="checked" ng-true-value="'true'" ng-false-value="'false'">
Add Dependency
</md-checkbox>

<p>Checkbox value: {{ checked }}</p>
<md-select  placeholder="Dependency" ng-model="test" style="min-width: 300px;" ng-show ="checked">
<md-option>testOption1</md-option>
<md-option>testOption2</md-option>
<md-option>testOption3</md-option>
</md-select>

Where did I do wrong? Thank you.

Answer 1

This is because you have "ng-true-value" and "ng-false-value" as true/false strings not bools. You can fix this by either...

Change ng-true-value="'true'" to ng-true-value="true"

 angular.module('sandbox', ['ngMaterial']); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script> <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script> <link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/> <div ng-app="sandbox"> <md-checkbox ng-model="checked" ng-true-value="true" ng-false-value="false"> Add Dependency </md-checkbox> <p>Checkbox value: {{ checked }}</p> <md-select placeholder="Dependency" ng-model="test" style="min-width: 300px;" ng-show ="checked"> <md-option>testOption1</md-option> <md-option>testOption2</md-option> <md-option>testOption3</md-option> </md-select> </div> 

OR

Change ng-show="checked" to ng-show="checked === 'true'"

 angular.module('sandbox', ['ngMaterial']); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script> <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script> <link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/> <div ng-app="sandbox"> <md-checkbox ng-model="checked" ng-true-value="'true'" ng-false-value="'false'"> Add Dependency </md-checkbox> <p>Checkbox value: {{ checked }}</p> <md-select placeholder="Dependency" ng-model="test" style="min-width: 300px;" ng-show ="checked === 'true'"> <md-option>testOption1</md-option> <md-option>testOption2</md-option> <md-option>testOption3</md-option> </md-select> </div> 

Answer 2

You are passing to md-checkbox a true and false value which are 'true' (string) and 'false' (string). So when you write ng-if="checked" or ng-show="checked", angular is just checking your "checked" string variable is not undefined.

Try to remove this :

ng-true-value="'true'" ng-false-value="'false'"

Answer 3

Make it simple, ng-model is enough to handle this. No need of ng-true-value\\ng-false-value , It's generally required when you need custom flag like Yes\\No

So : <md-checkbox ng-model="checked"> will do it for you.

See this working fiddle