checkBox ng-repeat from controller-data not Rendering:AngularJs
Dea*_*ool 0 javascript checkbox angularjs ng-repeat
我从Controller文件中获取复选框数据,但它没有正确呈现.以下是我的HTML:
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in People">
<input type="checkbox" id="{{x.id}}" >{{x.name}}<br/>
</tr>
</table>
<button>Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.People = [
{name:"Peter",id:"201"},
{name:"Lina",id:"202"},
{name:"Roger",id:"203"}
];
});
</script>
</body>
</html>
期望:
3行输入复选框,其名称与它们相邻
结果:
没有JS错误.有人可以帮我解决这个问题吗？
小智 5
只需添加一个"td"标记:JSFIDDLE
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in People">
<td>
<input type="checkbox" id="{{x.id}}" >{{x.name}}<br/>
</td>
</tr>
</table>
<button>Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.People = [
{name:"Peter",id:"201"},
{name:"Lina",id:"202"},
{name:"Roger",id:"203"}
];
});
</script>
</body>
</html>