从控制器设置 ng-show 值但我的代码不起作用
Posted
技术标签:
【中文标题】从控制器设置 ng-show 值但我的代码不起作用【英文标题】:Setting ng-show value from controller but my code is not working 【发布时间】:2015-10-21 09:12:27 【问题描述】:Angular js 的新手。我阅读了许多关于我的代码的解决方案。我面临的问题是,我有两张桌子。默认情况下,一张表是隐藏的,一张是可见的。当我单击按钮并想隐藏第二个表时,我想显示隐藏的表。当我单击按钮时,ng-show 值已更新,但表没有隐藏并且所需的表没有显示。在此先感谢您的帮助。
页面加载代码:controller.js
var refresh = function()
/** Driver Profile Data */
$scope.userProfile_show = true;
$scope.editUserProfile_show = false;
$http.get('/user/profile/?user_id='+$location.search()['driverID'], headers:'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'
).success(function (response)
$scope.userProfile = response.data;
);
);
refresh();
html 代码:
<table class="table" id = "editUserProfile" ng-show = "editUserProfile_show">
<thead>
<tr>
<td>Property</td>
<td>Value</td>
</tr>
</thead>
<table>
<table class="table" id = "userProfile" ng-show= "userProfile_show">
<colgroup>
<col class="col-md-5">
<col class="col-md-7">
</colgroup>
<thead>
<tr>
<th>User Profile</th>
<th style="text-align: -webkit-right"><button class="btn-primary btn" id = "editUserProfile_button" ng-click = "editUserProfile()">Edit User Profile</button></th>
</tr>
</thead>
<table>
在页面加载时,两个表都可以正常工作,但是当单击“编辑用户配置文件”按钮时,ng-show 的值会更新,但表不会切换它们的可见性。
editUserProfile() 的控制器代码
$scope.editUserProfile = function()
$scope.editUserProfile_show = true;
$scope.userProfile_show = false;
$http.get('/user/profile/?user_id=559f6d43cd9e9cfd07422baa', headers:'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'
).success(function (response)
console.log(response.data);
$scope.userProfile = response.data;
);
;
点击后HTML视图功能:
<table class="table ng-hide" id="editUserProfile" ng-show="true">
<thead>
<tr>
<td>Property</td>
<td>Value</td>
</tr>
</thead>
</table>
<table class="table" id="userProfile" ng-show="false">
<colgroup>
<col class="col-md-5">
<col class="col-md-7">
</colgroup>
<thead>
<tr>
<th>User Profile</th>
<th style="text-align: -webkit-right"><button class="btn-primary btn" id="editUserProfile_button" ng-click="editUserProfile()">Edit User Profile</button></th>
</tr>
</table>
当我单击按钮时,会将 ng-hide 类添加到第一个表 editUserprofile。当我删除 ng-hide 类时,这个表是可见的,但是第二个表仍然可见,尽管它的 ng-show 是假的。预计,问题与 $scope 有关。
【问题讨论】:
【参考方案1】:您只需要在作用域中定义一个变量。在两个表的 html 中,使用相同的范围属性,但一个表将其映射到ng-show
,而另一个表将相同的属性映射到ng-hide
。现在基于范围属性,在任何给定时间只会显示一个表。
在按钮的ng-click
上,只需更改scope
上的attribute
。
在控制器中: $scope.onShowClickEvent = 函数() $scope.editUserProfile=true;
$scope.onHideClickEvent = function()
$scope.editUserProfile=false;
在观点上:
<table class="table ..." id="editUserProfile" ng-show="editUserProfile">
....
</table>
<table class="table ..." id="userProfile" ng-show="editUserProfile">
....
</table>
希望这会有所帮助。
【讨论】:
【参考方案2】:$scope.editUserProfile = function()
$scope.editUserProfile_show = true;
$scope.userProfile_show = false;
$http.get('/user/profile/?user_id=559f6d43cd9e9cfd07422baa', headers:'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'
).success(function (response)
console.log(response.data);
$scope.userProfile = response.data;
$scope.editUserProfile_show = false;
$scope.userProfile_show = true;
);
;
var refresh = function()
/** Driver Profile Data */
$scope.userProfile_show = true;
$scope.editUserProfile_show = false;
$http.get('/user/profile/?user_id='+$location.search()['driverID'], headers:'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'
).success(function (response)
$scope.userProfile = response.data;
$scope.userProfile_show = false;
$scope.editUserProfile_show = true;
);
);
成功时您需要更改 Scope 变量的值,然后它才会反映
您需要在成功时更改 $scope.userProfile_show 和 $scope.editUserProfile_show 的值,如上所述。
【讨论】:
【参考方案3】:您不需要字符串插值,即带有ngShow
指令的
,它需要expression。如果expression 是truthy
,则元素分别显示或隐藏。
如果您传递任何字符串值"true"
或"false"
,它将评估为truthy
,因此将始终显示元素。
使用
ng-show = "editUserProfile_show"
而不是
ng-show = "editUserProfile_show"
【讨论】:
以上是关于从控制器设置 ng-show 值但我的代码不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Angular:ng-model 和 ng-show 不起作用
一旦 ng-show div 移出整个 div,ng-click 将不起作用