如何通过angularjs中的不同链接在同一个html页面上附加两个json文件

Question

我正在尝试通过 2 个不同的 json 文件加载和附加 2 个结果。 我的 Html 文件如下所示

<ion-view view-title="Dashboard" class="has-subheader">
  <ion-content scroll="false">
    <div class="row" style="padding-left:55px;">
        <div class="col col-60" style="border-radius: 20px; height:90%;border: 2px solid #73AD21;min-height:240px;">
            <div class="form-group" ng-repeat="input in inputs" id="content">
                <div ng-switch="input.type">
                    <div  ng-switch-when="text" > 
                        <label class="">{{input.name}}</label>
                        <input  type="text" value="{{input.value}}"/>
                    </div>
                    <div ng-switch-when="checkbox">
                        <input  type="checkbox" value="outputs[input.name]"/ >                              
                    </div>
                    <div ng-switch-when="button" class="btn-group inline pull-left">
                        <input ID="{{input.id}}" type="submit" value="{{input.value}}" class="{{input.class}}">
                    </div>
                </div>
            </div>    
        </div>
        <div class="col col-40" style="border-radius: 20px; height:90%;border: 2px solid #73AD21;">
            <a ng-click="loadPeople($event)" class="pointer" id="1">Link 1</a><br> 
            <a ng-click="loadPeople($event)" class="pointer" id="2">Link 2</a>
        </div>
    </div>
 </ion-content>
</ion-view>

控制器

angular.module('starter.controllers', [])
.controller('ChatsCtrl',function($scope,$http){
   $scope.loadPeople = function(event) {
             $scope.outputs = {};
             $scope.inputs = {};

             if(event.target.id==1)
             {
                var object1=  $http.get('js/link1.json').success(function(response){
                $scope.inputs=response;
                });
             }
             else if(event.target.id==2){
                var object2=$http.get('js/link2.json').success(function(response){
                $scope.inputs=response;
                });
            }
        };

})

link1.json

[{
 "type": "text",
 "value":"First",
 "name": "first",
 "required":"true"
}, {
"type":"button",
"value":"First",
"id":"first",
"class":"btn-primary"
},{
"type":"button",
"value":"Second",
"id":"second",
"class":"btn-danger"
},{
"type":"button",
"value":"Third",
"id":"Third",
"class":"btn-assertive"
}]

link2.json

[{
 "type": "text",
 "name": "first"
},
{
 "type": "text",
 "name": "fifth"
}, {
 "type": "checkbox",
 "name": "third"
},{
 "type": "text",
 "name": "second"
} ]

当前结果 When I click on link1

When I click on link2

当我单击它时，我想附加并显示来自 link2.json 的数据。请帮助我或提供有用的链接，我是 angularjs 的新手。感谢期待

Answer 1

编辑：抱歉没有看到您的数据对象实际上是一个数组 - 不是一个对象。 Extend 将扩展属性，将数据从一个数组附加到另​​一个数组是默认的 javascript，并且像 cmets 建议的那样，通过调用 .concat 完成。由于这似乎不起作用，请尝试将您的代码（或工作的 sn-p）放在 plunker 中，这样我们就可以看到真正的问题所在。

我仍然（没有 plunker）看到你的问题是这样解决的：

$scope.inputs = []; // This is important to set before you try and call concat on it.

然后在你的两个回调中：

// Make sure you only concat the data and not the whole response.
$scope.inputs.concat(response.data); 

也许是因为您尝试连接响应而不是响应中的数据？查看此链接以获取更多信息： https://docs.angularjs.org/api/ng/service/$http