2017-01-17 4 views
0

別の配列のデータをテーブルの1つの部分に入れようとします。 私の最初のJSON "名前":jsonからのConcat 2のデータAngular ng-repeat

[ 
     { 
      "name": "AAAAAA", 
      "down": "False" 

     }, 

     { 
      "name": "BBBBBB", 
      "down": "True" 
     }, 
     { 
      "name": "CCCCC", 
      "down": "False" 
     } 
] 

セカンドJSON "データ":

[ 
     { 
      "data": "35%" 
     } 
] 

Javascriptを:HTMLで

var app = angular.module('app', []); 
    app.service('service', function($http, $q){ 
     this.getNames = function() { 
      var names = $http.get('names.json', {cache: false}); 
      var datas = $http.get('data.json', {cache: false}); 
      return $q.all({datas,names}); 
     }; 

     }); 
    app.controller('FirstCtrl', function($scope, service, $http) { 
      var promise = service.getNames(); 
      promise.then(function (data) { 
       $scope.names = data.names.data; 
       $scope.datas = data.datas.data; 
       $scope.namesanddata = $scope.names.concat($scope.datas); 

       console.log($scope.namesplit); 
       console.log($scope.datas); 

      }); 
    }); 

表:

div ng-controller="FirstCtrl" 
    <table> 
     <tbody> 
      <tr ng-repeat="name in namesanddata"> 
      <td>{{name.name}}</td> 
      <td ng-if="name.down=== 'False'">{{name.down}}</td> 
      <td ng-if="name.down !== 'False'">{{name.data}}</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 

私の問題 - <td ng-if="name.down !== 'False'">{{name.data}}</td>はテーブルに表示されません。 console.logでは4つのオブジェクトのような配列に連結されており、おそらくこれは{{name.name}}の隣のテーブルには表示されませんが、代わりに{{name.down}}の別のjsonの{{name.data}}を表示する方法がわかりません。 お返事ありがとうございます。その後

$scope.namesanddata = $scope.names.concat($scope.datas); 

次のいずれか:コントローラからこの行を削除し

AAAAAA False 
BBBBBB 35% 
CCCCC False 

+0

それは...ですか'データ'または 'データ'? –

+0

データはjsonデータです。私は名前に4つのオブジェクトの名前を連結しています.4番目の名前は{"data": "35%} - データのデータは@PritamBanerjee – bafix2203

+0

" data "は複数です。 –

答えて

1

はあなたの出力を与えるために

解決策1 - ビューにインラインを

変更するng-repeatは、次のように:

<tr ng-repeat="name in names"> 
    <td>{{ name.name }}</td> 
    <td>{{ (name.down === 'False') ? name.down : datas[0].data }}</td> 
</tr> 

OR

ソリューション2 - クリーンなビューを維持するフィルターを使用することにより、以下のように

app.filter('myFilter', function() { 
    return function(items, datas) { 
     var filtered = []; 
     angular.forEach(items, function (i) { 
      if (i.down !== "False") 
       i.down = datas[0].data; 
      filtered.push(i); 
     }); 
     return filtered; 
    } 
}); 

があなたのng-repeatを変更します。

<tr ng-repeat="name in names | myFilter: datas"> 
    <td>{{ name.name }}</td> 
    <td>{{ name.down }}</td> 
</tr> 
関連する問題