AngularJS设置html属性
AngularJS set html properties
我们是JavaScript和AngularJS的新手,但场景非常简单。我们想要设置从REST服务接收的html属性。
这是我们的配置文件Controller.js:
angular
.module('app')
.controller('profileController', ['$scope', '$http', '$window', function($scope, $http) {
// REST service works properly
var resource = 'http://localhost:8080/user';
$http.get(resource).then(function(result){
// logs right json
console.log(result);
// no effect
$scope.content = result.data.toString();
// no effect
if(!$scope.$$phase) {
$scope.$apply();
}
});
} ]);
profile.html
<div>
<div class="container">
<br><br><br>
<h2 class="sub-header">Profile</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Forename</th>
<th>Name</th>
<th>Role</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{profile.data}}</td>
<!-- Doesn't work as well
<td>{{profile.forename}}</td>
<td>{{profile.lastname}}</td>
<td>{{profile.role}}</td>
<td>{{profile.email}}</td>-->
</tr>
<div id="container" ng-controller="profileController">
<content-item forename="item"></content-item>
</div>
</tbody>
</table>
</div>
</div>
</div>
REST服务工作正常,并将json发回,JavaScript控制台中的日志输出是正确的,只是html中的设置不起作用,我们完全没有线索。
提前感谢!
考虑一下这个Plunk。
app.controller("myController", [
"$scope",
function($scope){
$scope.content = [
{
"firstname": "Natalie",
"lastname": "Portman",
"role": "Accountancy",
"email": "n.p@email.com"
},
{
"firstname": "Johnny",
"lastname": "Depp",
"role": "Sales Management",
"email": "j.d@email.com"
},
{
"firstname": "Kevin",
"lastname": "Costner",
"role": "Crisis control",
"email": "k.c@email.com"
},
];
}]);
其中,上述$scope.content
是您的$scope.content = result.data;
的硬编码模拟。
用途:
<tr ng-repeat="profile in content">
<td>#</td>
<td>{{profile.firstname}}</td>
<td>{{profile.lastname}}</td>
<td>{{profile.role}}</td>
<td>{{profile.email}}</td>
</tr>
检查Plunk以获取完整的代码
PS:例如,我将{{profile.data}}
更改为#
,因为我不知道应该是什么。
试试这个也检查一下你的ng控制器和ng应用程序,角度教程中的这一步应该很好。
在这里,在你的代码中,ng控制器应该至少在表标签中,即
<div>
<div class="container">
<br><br><br>
<h2 class="sub-header">Profile</h2>
<div class="table-responsive">
<table class="table table-striped" ng-controller="profileController">
<thead>
<tr>
<th>#</th>
<th>Forename</th>
<th>Name</th>
<th>Role</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{content}}</td>
<!-- Doesn't work as well
<td>{{content.forename}}</td>
<td>{{content.lastname}}</td>
<td>{{content.role}}</td>
<td>{{content.email}}</td>-->
</tr>
<div id="container">
<content-item forename="item"></content-item>
</div>
</tbody>
</table>
</div>
</div>
转换
$scope.content = result.data.toString();
到此:
$scope.content = result.data;
如果你想打印内的数据
<td>{{profile.data}}</td>
您必须更改html标记中控制器的位置。。
相关文章:
- 分析高度属性时出现意外值{{specs.height}}.index.html
- 获取HTML属性中CSS声明的值
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- HTML范围:动态设置值属性
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- 一个正则表达式,用于从JS中的HTML标记中删除id、样式和类属性
- 自定义HTML元素属性未显示-Web组件
- 如何在CSS或Javascript中定位选定的属性(在HTML选项中)
- 函数jquery.html()不提供数据属性集值
- Android在HTML容器中滚动,该容器具有CSS溢出属性
- 如何使用Undercore和Backbone在HTML中表示模型属性
- Regex剥离具有特定属性的html标记
- html5中数据描述属性中的html列表
- 不存在的属性HTML输入字段
- 应该为“容器”元素和“动画”元素分配什么位置属性?HTML CSS JavaScript.
- 动画高度属性::HTML+CSS+JavaScript
- 不能读取属性'HTML'的定义
- 基于类似屏幕的CSS媒体查询更改Javascript属性(HTML中的内联)
- 在 JointJS 中,我得到错误属性 html 在类型“类型形状”上不存在
- 覆盖默认属性'HTML的值"标签,这是由FB js库设置