Angular ng-repeat concat 2 Json

时间:2017-01-16 12:24:07

标签: javascript angularjs json ng-repeat

我尝试从2个jsons获取数据并将其列在表中:

1st' names.json':

table{border-collapse:collapse;text-align:center}
td{border:1px solid#fbbc05;padding:0}
.background{background:rgba(255,255,255,0.1)}
.input{color:#ea4335;outline:0;overflow:hidden;vertical-align:sub;white-space:nowrap}
.input:empty:before{color:#8a190f;content:attr(placeholder);cursor:text}
.red{color:#ea4335}
#title{color:#e4a769;font-family:font;font-size:1.5em;font-weight:bold}
@font-face{font-family:font;src:url(https://fonts.gstatic.com/s/varelaround/v6/APH4jr0uSos5wiut5cpjrugdm0LZdjqr5-oayXSOefg.woff2)}

秒' data.json'

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

        },

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

使用Javascript:

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

现在我必须在表格HTML中显示它:

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

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

我尝试使用concat()但是它不起作用,是否有任何方法可以通过ng-repeat从2个数组中的表数据中显示?提前感谢您的回答!

1 个答案:

答案 0 :(得分:0)

我相信您可以轻松实现所需的文件管理器。

var app = angular.module('app', []);

app.controller('FirstCtrl', FirstCtrl);


function FirstCtrl($scope) {

  $scope.names = [{
    "name": "AAAAAA",
    "down": "False"

  }, {
    "name": "BBBBBB",
    "down": "False"
  }, {
    "name": "CCCCC",
    "down": "True"
  }];
  $scope.datas = [{
    "data": "15%"
  }]

};

app.filter('getvalue', function() {

  return function(name, datas) {

    if (name.down === 'False')
      return name.down;
    else
      return datas[0].data;
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl">
  <table>
    <tbody>
      <tr ng-repeat="name in names">
        <td>{{name.name}}</td>
        <td>{{name | getvalue:datas}}</td>
        <td>{{name.data}}</td>
      </tr>
    </tbody>
  </table>
</div>