AngularJS-如何在JS中加载绑定到的变量之前不显示HTML元素
AngularJS - how to not display HTML element until the variable it is binded to is loaded in the JS?
这是我的HTML:
<button type="button" class="btn btn-primary" ng-hide="ctrl.userProfile.following">Follow</button>
<button type="button" class="btn btn-primary" ng-show="ctrl.userProfile.following">Unfollow</button>
所以基本上,如果ctrl.userProfile.following
是true
,我想隐藏"跟随"按钮并显示"不允许"按钮,反之亦然。
这是我的后端:
self.userProfile = {};
function fetchUserProfile() {
$http.get('/users/' + username)
.then(function(response) {
self.userProfile = response.data;
}, function(response) {
self.cerrorMessages = BaseService.accessErrors(response.data);
});
};
fetchUserProfile();
因此,我获取userProfile
,然后用watching
变量更新self.userProfile
(当我执行self.userProfile = response.data
时会发生这种情况。话虽如此,有没有办法告诉HTML在self.userProfile
填充watching
变量之前不要显示按钮?
创建一个userProfile.ready
标志,并使用它来控制Follow
和Unfollow
按钮的显示。
HTML
<div ng-show="ctrl.userProfile.ready">
<button type="button" ng-hide="ctrl.userProfile.following">Follow</button>
<button type="button" ng-show="ctrl.userProfile.following">Unfollow</button>
</div>
JS-
self.userProfile = {};
self.userProfile.ready = false;
function fetchUserProfile() {
self.userProfile.ready = false;
$http.get('/users/' + username)
.then(function(response) {
self.userProfile = response.data;
self.userProfile.ready = true;
}, function(error) {
self.cerrorMessages = BaseService.accessErrors(error.data);
});
};
fetchUserProfile();
有几种方法可以做到这一点。这里有一个:
如果您从一个空对象开始,并且正在等待promise的解析,那么您可以设置一个范围变量来检查对象的长度。
例如。self.userProfileLength=Object.keys(self.userProfile).length;
在视图中,执行:ng if="ctrl.userProfileLength"(注意:如果您想将元素保留在DOM中,也可以使用ng-show)
Object.keys返回数组中对象的键。长度超过0的任何值都是truthy值,因此它将通过ng-if条件。
相关文章:
- 节点.js将变量显示为 HTML
- 使用eval()定义变量显示未定义的错误
- 将Flask中的变量显示为javascript代码时出错
- 为什么我的 ajaxurl 变量显示为未定义
- HTML 下拉列表到 Javascript 变量显示错误
- 变量显示为未定义
- ASP.Net Ajax - JavaScript:如何在HTML中使用返回的变量显示
- 如何使用变量显示来自 URL 的图像来创建 URL
- Javascript 实例变量显示为未定义
- 按图像计数变量显示图像列表
- 如何根据变量显示一定数量的输入字段
- 基于true/false变量显示/隐藏进度条
- Cognos Prompt页面提示使用render变量显示/隐藏
- 为什么变量显示为未定义
- javascript变量显示以前的值
- Firefox没有处理keyCode's.它在调试器中将变量显示为矩阵
- 为输入值设置变量显示对象对象消息
- 在angular.js中通过作用域变量显示或追加元素
- JavaScript -全局变量显示为未定义
- 如何使用javascript变量显示图像