将 JSON 中的数据显示到 AngularJS 中的 TextView

Question

我有一个包含以下值的 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>

Answer 1

尝试这样做（假设 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>

Answer 2

也许这就是您要找的？ 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" }
  ];

将 JSON 中的数据显示到 AngularJS 中的 TextView

Display data from JSON to TextView in AngularJS

html

json

angularjs

angularjs-ng-repeat

angular-ngmodel