如何通過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> 

的cotroller

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來，當我點擊它。 Plz幫助我或提供有用的鏈接，我是angularjs的新手。預計感謝

Answer 1

編輯：抱歉沒有看到你的數據對象實際上是一個數組 - 而不是一個對象。擴展會擴展屬性，將數據從一個數組附加到另​​一個數組是默認的JavaScript，並且像意見建議一樣，通過調用.concat完成。既然這看起來不起作用，請嘗試將代碼（或工作代碼片段）放在重擊器中，以便我們看到真正的問題在哪裏。

我還是（無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); 

也許是因爲你嘗試CONCAT的反應，而不是來自響應的數據？點擊此鏈接瞭解更多信息： https://docs.angularjs.org/api/ng/service/ $ http