如何使用ng-if或ng-show以使MD选择删除(hide)

Question

我正在尝试在未检查复选框时删除MD选择或隐藏。我疲倦了ng-if或ng-show，但是一旦显示了MD选择，就无法将其删除或隐藏。我的代码如下：

使用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"one_answers" ng-false-value"，作为true/false字符串而不是布尔。您可以通过...

来解决此问题

更改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>

或

更改ng-show ="检查"到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一个真实的和false值，该值是'true'(string(和'false'(string(。因此，当您编写ng-if ="已签名"或ng-show ="已检查"时，Angular只是检查您的"检查"字符串变量。

尝试删除此信息：

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

Answer 3

使其简单，ng-model足以处理此操作。不需要ng-true-valueng-false-value，通常需要自定义标志(例如YesNo

(

so：<md-checkbox ng-model="checked">将为您做。

请参阅此工作小提琴