使用 ng-repeat 和 ng-model 数据冲突从 JSON 显示数据到文本视图答案

【问题标题】：Display data from JSON to Text view using ng-repeat and ng-model data conflict使用 ng-repeat 和 ng-model 数据冲突从 JSON 显示数据到文本视图
【发布时间】：2016-09-23 10:40:55
【问题描述】：

我有一个 API 代码可以生成这个特定的结果：

[
  {
    "devid": "3",
    "name": "abacus",
    "type": "math device",

  },
  {
    "devid": "4",
    "name": "beaker",
    "type": "science device",
  }
]

现在，我可以在我的 html 文件中调用这个 json 响应，已经使用了我放在控制器中的数组。这是我的控制器代码：

labserviceService.lab1(id)
            .then(function(data){
                $scope.device = data.data;
                $scope.deviceID = data.data[0].devid;
                $scope.devicename = data.data[0].name;
                $scope.devicetype = data.data[0].type;

            });

如何使用 ng-repeat 和 ng -model 在我的 div 中显示数据？这是我的 div 部分

<div class="form-group" ng-repeat="item in device">
        <label class="col-md-4 control-label">
            ID:
        </label>                                                  
        <div class="col-md-8">                                           
            <input type="text" name="regular" class="form-control" ng-model="deviceID">
        </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="devicename">
        </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="devicetype">
        </div>
            <br><br>
</div>

我试过这段代码，但只显示和重复的值是第一组，第二组根本不显示。如何显示 json 中的所有数据？非常感谢任何帮助

【问题讨论】：

标签： html arrays json angularjs-ng-repeat angular-ngmodel

【解决方案1】：

试试这样的。使用数组从您的响应中获取所有数据，例如：

$scope.device= [];

labserviceService.lab1(id)
                .then(function(data){
                    for(i=0; i<data.length; i++){
                       var myData= {
                            deviceID: data.data[i].devid,
                            devicename: data.data[i].name,                                
                            devicetype: data.data[i].type
                       }
                       $scope.device.push(myData);
                    }        
                });

然后添加 ng-repeat：

 <div class="form-group" ng-repeat="item in device"> <!-- This is $scope.device -->
        <label class="col-md-4 control-label">
            ID: item.deviceID
        </label>                                                  
        <div class="col-md-8">                                           
            <input type="text" name="regular" class="form-control" ng-model="item.deviceID">
        </div>
         <!-- and so on... item.devicename item.devicetype--> 
</div>

希望能帮到你。我不知道你以后想做什么......

【讨论】：