我正在尝试动态切换ng-show值。
我有一个控制器有两个方法,一个显示,一个隐藏:
var HeaderCtrl = this;
HeaderCtrl.HelpButtonVisible = "false";
HeaderCtrl.HideHelpButton = function() {
HeaderCtrl.HelpButtonVisible = "false";
}
HeaderCtrl.ShowHelpButton = function() {
HeaderCtrl.HelpButtonVisible = "true";
}
这是以隐藏方式启动的按钮。它也用于调用隐藏自身的方法:
<button id="help-button" ng-show="{{HelpButtonVisible}}" class="button button-stable icon-left ion-information-circled"
ui-sref="login" ng-click="HeaderCtrl.HideHelpButton()">Help</button>
这是带有该方法的按钮:
<button id="login-button" class="col button button-positive button-small" ng-click="HeaderCtrl.ShowHelpButton()" ui-sref="main">Log in</button>
ng-show更新为true,仍然没有显示帮助按钮。
为什么呢?我尝试了所有内容,$scope.$apply
,$scope.$digest
,尝试在没有{{ }}
的情况下调用对象,没有任何效果。
编辑:
完全控制器:
angular.module('app.controllers', [])
.controller("HeaderCtrl", function( ) {
var HeaderCtrl = this;
HeaderCtrl.HelpButtonVisible = false;
HeaderCtrl.HideHelpButton = function() {
HeaderCtrl.HelpButtonVisible = false;
}
HeaderCtrl.ShowHelpButton = function() {
HeaderCtrl.HelpButtonVisible = true;
}
})
答案 0 :(得分:1)
你所拥有的不是惯用的角度。使用角度时坚持惯例很重要。连接到DOM的任何内容都应附加到$scope
对象:
angular.module('app.controllers', [])
.controller("HeaderCtrl", function($scope) {
$scope.HelpButtonVisible = false;
$scope.HideHelpButton = function() {
$scope.HelpButtonVisible = false;
}
$scope.ShowHelpButton = function() {
$scope.HelpButtonVisible = true;
}
});
查看:
<button id="help-button"
ng-show="HelpButtonVisible"
class="button button-stable icon-left ion-information-circled"
ui-sref="login"
ng-click="HideHelpButton()">Help</button>
答案 1 :(得分:1)
你需要使用ng-model,你也不能绑定那样的原语 控制器:
this.HelperObj = {"ArrofHelperObjs":[/*YOUR OBJECTS HERE*/]};
this.ToggleHelpButton = function(obj){
var package = this.HelperObj.ArrofHelperObjs.length;
var handl = this.HelperObj.ArrofHelperObjs;
if(package == 0){
handl.push(obj);
return 200;
}
for(var x=0;x<package;x++){
if(handl[x] == obj){
handl.splice(x, 1);
return 200;
}
if(x == package-1){
handl.push(obj);
return 200;
}
}
console.log("Error: handl= "+handl);
console.log("Error: obj= "+obj);
return "Error: Conditions were supposed to have been met";
};
然后是html
<div ng-repeat="x in myctrl.HelperObj.ArrofHelperObjs" >
<button ng-model="x.selected" ng-click="myctrl.ToggleHelpButton(x.html); x.selected = !x.selected" ng-show="x.selected">
{{x.html}}
</label>
</div>
有两点要指出。 ng-model是您绑定数据的方式。当使用ng-model时,不要与基元结合。我花了一段时间才想到这一点。在共享示例中,我的对象具有选定的属性和html。即。
this. package = {"selected":"false","html":"tagone"};
这在某些情况下会起作用,但大多数时候你会有多个对象。看起来像这样。
this. package = {"ArrayofObjects":[]};
在这些括号[]内部会显示所有对象。喜欢这个
this. package = {"ArrayofObjects":[{"selected":"false","html":"tagone"},{"selected":"false","html":"tagtwo"}, {"selected":"false","html":"thirdtag"} ]};
设置完成后,创建一个可以改变其中任何值的函数。这就是我的ToggleHelpButton方法正在做的事情。我正在更改该元素的selected属性的值。然后在你的HTML中,使用
<toggledelement ng-model="ctrl.package.ArrayofObjects[x].someproperty">
x是对象数组的索引 someproperty是字面选择的。 你现在有一个绑定到truthy或falsy值的元素。玩得开心!
答案 2 :(得分:0)
尝试将此应用于$ scope
var app = angular.module('ido.controllers', []);
app.controller("HeaderCtrl", function($scope) {
angular.extend($scope, {
HelpButtonVisible: false,
HideHelpButton: function() {
$scope.HelpButtonVisible = false;
},
ShowHelpButton: function() {
$scope.HelpButtonVisible = true;
}
});
})
<button id="help-button"
ng-show="HelpButtonVisible"
class="button button-stable icon-left ion-information-circled"
ui-sref="login"
ng-click="HideHelpButton()">Help</button>
始终将事件和值附加到$ scope。您只能访问$ scope。
使用示波器时,永远不需要使用。$ digest()或。$ apply()。只有当你突破$ scope时。