Concat 2 来自 json Angular ng-repeat 的数据

Question

我尝试将另一个数组中的数据放入 table 中的一个部分。我的第一个 json "names" :

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

        },

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

第二个json"data":

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

Javascript:

 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);

            });
    });

Table 在 HTML 中：

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>没有显示在 table 中。在 console.log 中，它像 4 个对象一样连接到数组，可能因此它不会显示在 {{name.name}} 旁边的 table 中，但我不知道如何显示 {{name.data}}来自 table 中的另一个 json 而不是 {{name.down}}。提前感谢您的回答。

Answer 1

给你一个输出：

AAAAAA  False
BBBBBB  35%
CCCCC   False

从控制器中删除这一行：

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

然后：

解决方案 1 - 在视图中内联

按如下方式更改您的 ng-repeat：

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

或

解决方案 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>

Concat 2 来自 json Angular ng-repeat 的数据

Concat 2 datas from json Angular ng-repeat

javascript

json

angularjs

ng-repeat