我有一个有更多选项的选择器,如果选择了选择器的第一个选项,我想隐藏一个按钮。
<select ng-model="$ctrl.type">
<option value="">none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
可以看出,第一个选项有 value =""
.
这是按钮:
<div ng-show="$ctrl.type!=""" class="btn action-btn" ng-click="$ctrl.doSomething()">
my button
</div>
在控制器内部,我有以下代码:
class MyCtrl {
constructor(...) {
...
}
doSomething() {
this.type = "";
}
}
为什么不起作用?
主要问题是您应该使用相同的双引号,而您应该使用不同的双引号。
<div ng-show="ctrl.type !== ''" class="btn action-btn" ng-click="$ctrl.doSomething()">
my button
</div>
话虽如此,我会为此使用布尔标志,因为它使代码和检查更容易阅读和理解:
doSomething() {
if ( type !== '' )
this.showForType = true;
}
<div ng-show="ctrl.showForType === true" class="btn action-btn" ng-click="$ctrl.doSomething()">
my button
</div>
您不一定需要检查 true,但从维护和可读性的角度来看,它确实有帮助。
同样的事情也可以用这样的事情做:
<div ng-show="ctrl.showForType" class="btn action-btn" ng-click="$ctrl.doSomething()">
my button
</div>
如果你的角度控制的UI元素的任何部分显示,而没有设置正确的状态,你可以使用ng-cloak来阻止这种情况发生:https://docs.angularjs.org/api/ng/directive/ngCloak
你可以试试这个:
<div ng-show="!ctrl.type" class="btn action-btn" ng-click="$ctrl.doSomething()">
您的ng-show
条件不正确,因为它没有检查空值。要使其正常工作,您需要将代码更改为,
<div ng-show="ctrl.type!=''" class="btn action-btn" ng-
click="$ctrl.doSomething()">
my button
</div>
您可以进一步增强此功能以使用trim()
从ctrl.type
中删除空格并在比较过程中获得适当的结果。为此,您可以使用,
<div ng-show="ctrl.type.trim()!=''" class="btn action-btn" ng-
click="$ctrl.doSomething()">
my button
</div>
它应该是,
<div ng-show="ctrl.type!=''" class="btn action-btn" ng-click="$ctrl.doSomething()">
您可以通过以下三种方式做到这一点
一
ng-hide="$ctrl.type==''"
//正确的方式和相关命名功能
二
ng-show ="$ctrl.type!=''"
//正确的方式,但不相关的功能命名
三
ng-if="$ctrl.type!=''"
//正确方式而不渲染 DOM 元素
请检查:ng-if和ng-show/ng-hide有什么区别