javascript - ngclass 在页面加载时自动替换我的 css 设置

标签 javascript html css angularjs

我正在尝试了解一些有关 AngularJS 的知识。 因此,我获取了一个 JSON 并将其分解为我用 Angular 创建的表。 我为该表编写了几个 CSS 类,以使其变得更好一些。 当我运行它时,我发现了一些非常令人震惊的事情,我可以在浏览器中看到我的表已经更改,并自动给出了一个名为:“ng-binding”的类。

我无法真正控制我的表格样式,而且很奇怪!

是否有其他人遇到过这种情况并可以建议我如何更改/取消它,以做一些事情以便我可以重新获得对 Angular 对象的样式控制?

谢谢

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<head>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,$http) {
  $http.get("http://www.json-generator.com/api/json/get/chWykWNZcO?indent=2").then(function (response) {
      $scope.myData = response.data;	  
	  $scope.Fun = function(info){
	  $scope.selected=info;
	  console.log(info);
    	$scope.show = $scope.myData[info].email;
  });
});
</script>
<style>

				body{
				margin:0;
			}
		
			.style1{
				border: 1px solid gray;
				align:center;
				border-collapse: collapse;	
				height:5000px;
				
				}
				
			.style2{
				align:center;
				border-collapse: collapse;
				width:252px;
				position:fixed;
				left:calc(50% - 126px);
				margin-top:0;
				}
				
			
				
			td{
				border: 1px solid gray;
				align:center;
				border-collapse: collapse;
				}
						
			.container {
			padding-top:50px;
			width:252px;
			margin:0 auto;
			
			}
</style>
</head>
<body>
	<div class="style2">
		<table >
			<tr>
				<td>			   
				</td>
				<td>
					one
				</td>
				<td>
					two
				</td>
				<td>
					three
				</td>
			</tr>
		</table>		
	</div>
	<div class="container">
	<table class="style1">
		<tbody ng-app="myApp" ng-controller="customersCtrl">
		<tr ng-repeat="x in myData" ng-click="Fun($index)">
			<td ng-bind="x.id"></td>
			<td ng-bind="x.name"></td>
			<td ng-bind="x.email"></td>
			<td ng-bind="x.city"></td>
		</tr>
		</tbody>
  </table>
  </div>
  
  <fieldset>
    <legend>click a row to get email adress:</legend>
	<div> {{show}}</div>
	</fieldset>

</body>
</html>

最佳答案

docs 中所示

ngBind 属性告诉 Angular 将指定 HTML 元素的文本内容替换为给定表达式的值,并在该表达式的值发生更改时更新文本内容。

通常,您不会直接使用 ngBind,而是使用双 curl 标记,例如 {{ expression }},它类似但更简洁。

如果模板在 Angular 编译之前暂时以原始状态显示在浏览器中,则最好使用 ngBind 而不是 {{ expression }}。由于 ngBind 是一个元素属性,因此它使绑定(bind)在页面加载时对用户不可见。

此问题的替代解决方案是使用 ngCloak指令。

这意味着在你的情况下是这样的:

<td>{{x.id}}</td>

而不是

<td ng-bind="x.id"></td>

关于javascript - ngclass 在页面加载时自动替换我的 css 设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37828574/

相关文章:

JQuery 滚动动画颜色

css - 以嵌入式形式隐藏带有CSS的输入字段

javascript - 按位与运算符如何处理 javascript 中的对象?

javascript - Chart.JS 全宽、响应式圆环图和 Bootstrap

javascript - AngularJs 在整个应用程序中使用 javascript 函数

php - 选择一组选项取决于您之前选择的选项

javascript - drawImage() 按顺序 Canvas 并维护顺序

javascript - 将 Google Hangouts 集成到 Google 协作平台中

javascript - 在提交表单时打开 Bootstrap 模式

html - 我如何摆脱这个空间?