Html引导程序表未显示在屏幕上
Html bootstrap table not appearing on screen
我在html中显示表格时遇到问题。当我硬编码表中的值时,它们会出现,但当使用angularjs时,它们不会出现。所以我认为这个问题与语言有关。这是我试图显示的html代码:
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Friends</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Friends in AllUsersFriends">
<td>{{Friends}}</td>
</tr>
</tbody>
</table>
</div>
这是我的controller.js代码:
socket.on("AllFriends",function (Friends){
$log.log('so the friends are');
$scope.AllUsersFriends=Friends;
console.log($scope.AllUsersFriends);
$scope.$apply();
});
我通过flask socketio收到一个数组,然后我将该数组设置为我创建的$scope.AllUsersFriends数组。我在控制台中看到了数据,但屏幕上没有显示任何行。如何使我的数据显示在屏幕上?谢谢
所以我解决了我的问题,问题是数组中的数据实际上正在更新,但我的应用程序中有不同的页面,一旦我更改页面,数据就会丢失,然后我通过在服务中创建相同的数组来解决这个问题,这样更改是全局的,数据不会从数组中擦除。所以表格总是显示出来,只是没有任何数据可以显示。感谢
看看这个:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table class="table table-hover">
<tr><th>Friends</th></tr>
<tr ng-repeat="x in friends"><td>{{x.name}}</td></tr>
</table>
<script>
//App declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.friends = [{name: "Peter"},{name:"Laila"},{name:"Rosy"}];
});
</script>
</body>
</html>
希望,它解决了!
相关文章:
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- 调整屏幕大小后不显示子菜单
- 用HTML在不同屏幕上显示和隐藏内容的方法
- 在网站上显示.mov作为加载屏幕的最佳方式
- 根据屏幕宽度显示块
- 根据屏幕大小显示主干.js集合的子集
- 如何显示显示的html元素:在特定的媒体屏幕上没有
- 根据屏幕分辨率显示自定义背景图像
- 如何将弹出窗口居中显示在屏幕上
- 在Chrome扩展程序中,是否可以截屏并在弹出窗口中显示屏幕
- IE11(Windows Phone 8.1)不感应(显示尺寸)屏幕旋转
- HTML/JS 如何输入文本并使其显示在屏幕上
- 在屏幕上显示选择选项图像
- 在屏幕中央显示图像 CSS jQuery
- 仅在较小的屏幕上显示图像
- 在MVC中的“编辑”屏幕中只显示所需的DDL值
- 我希望每次单击按钮时都能将每张图片更改为显示在屏幕上的同一位置
- 确定网络应用程序的屏幕显示时间
- 为什么白色屏幕显示在幻灯片之间的内容
- 如何让等待屏幕显示加载时,它有CSS样式