我有一个带有此值的json文件:
[
{
"id": "3",
"name": "abacus",
"type": "math device",
},
{
"id": "4",
"name": "beaker",
"type": "science device",
}
]
我想要的是在我的html文件中显示这些值我想我如何使用ng-repeat但我似乎无法找到如何做到这一点。你能帮我么?任何帮助,将不胜感激。这是我想要显示json的html部分:
<div class="form-group" >
<label class="col-md-4 control-label">
ID:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="id">
</div>
<label class="col-md-4 control-label">
Name:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="name">
</div>
<label class="col-md-4 control-label">
Type:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="type">
</div>
<br><br>
</div>
答案 0 :(得分:1)
也许这就是你要找的东西? jsfiddle
HTML
<div class="form-group" ng-repeat="item in data">
<label class="col-md-4 control-label">
ID:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="item.id">
</div>
<label class="col-md-4 control-label">
Name:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="item.name">
</div>
<label class="col-md-4 control-label">
Type:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="item.type">
</div>
<br><br>
</div>
控制器
$scope.data = [
{ "id": "3", "name": "abacus", "type": "math device" },
{ "id": "4", "name": "beaker", "type": "science device" }
];
答案 1 :(得分:0)
尝试这样做(假设在范围内定义json
并包含您的数据)
<div class="form-group">
<label class="col-md-4 control-label" ng-repeat-start="item in json">
ID:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="item.id">
</div>
<label class="col-md-4 control-label">
Name:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="item.name">
</div>
<label class="col-md-4 control-label">
Type:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="item.type">
</div>
<br><br ng-repeat-end>
</div>