Question

我试图在未选中复选框时删除或隐藏md-select。我已经厌倦了ng-if或ng-show，但是一旦显示md-select，就无法删除或隐藏它。我的代码如下：

使用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>

使用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>

我哪里做错了？谢谢。

Answer 1

这是因为你有“ng-true-value”和“ng-false-value”作为真/假字符串而不是bool。你可以通过......来解决这个问题。

将ng-true-value =“'true'”更改为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

将ng-show =“checked”更改为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

您正在向md-checkbox传递一个true和false值，它们是'true'（字符串）和'false'（字符串）。因此，当您编写ng-if =“checked”或ng-show =“checked”时，angular只是检查您的“已检查”字符串变量未定义。

尝试删除此内容：

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

Answer 3

简单一点，ng-model足以解决这个问题。无需ng-true-value\ng-false-value，当您需要Yes\No等自定义标记时，通常需要<md-checkbox ng-model="checked">

所以：{{1}}会为你做。

请参阅此working fiddle

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

3 个答案: