Question

我需要在表2中列出相互依赖的jsons

1st json＆＃34;姓名＆＃34; ：

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

        },

        {
            "name": "BBBBBB",
            "down": "45%"
        },
        {
            "name": "CCCCC",
            "down": "12%"
        }
]

第二个json＆＃34;数据＆＃34;：

[
        {
            "data": "AAAAAA"
        }
]

Js文件：

app.service('service', function($http, $q) {
    this.getNames = function() {
       var datas = $http.get('datas.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;
             })
             .filter('quefilter', function() {
                return function(data) {
                   var filterque = [];
                   angular.forEach(data, function(item) {
                      if (datas[0].data == item.name) {
                         filterque.push(item);
                      } else if (datas[0].data != item.name) {
                         filterque.push("err");
                      }
                   });

                   return filterque;
                };
             });

HTML文件：

<table>
   <tbody>
      <tr ng-repeat="name in names">
         <td>{{name.name}}</td>
         <td>{{name.down}}</td>
         <td>{{datas[0].data | quefilter}}</td>
      </tr>
   </tbody>
</table>

因此，我尝试执行自定义过滤器，该过滤器仅在{{datas[0].data}}的同一名称旁边列出{{names.name}}。在我的表中应该是AAAAAA旁边的AAAAAA。但是我的代码没有用。提前感谢您的提示和解答！

Answer 1

你可以这样做：我添加了fiddle来澄清

<div ng-controller="MyCtrl">
  <table>
        <tbody>
          <tr ng-repeat="name in names">
            <td>{{name.name}}</td>
            <td>{{name.down}}</td>
            <td ng-repeat="record in datas | filter:{data: name.name}">
              {{record.data}}
            </td>

          </tr>
        </tbody>
      </table>
</div>

Answer 2

如果您知道数据中只有一个元素与名称中的元素匹配，请使用find https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/find

在您的情况下，将此功能添加到范围

$scope.getTheRightData = name => $scope.datas.map(d=>d.data).find(d=>d===name);

并使用它

<td ng-bind="getTheRightData(name.name)"></td>

http://jsfiddle.net/elrasco/34f5Lzgd/6/

Answer 3

过滤器：

.filter('myFilter', function() {

  return function(input, param) {

    var output;

    output = data.map((val) => {
      if (data.name == param) return val;
    })

    return output;

  }

在您看来：

<table>
   <tbody>
      <tr ng-repeat="name in names | myFilter(datas[0].data)">
         <td>{{name.name}}</td>
         <td>{{name.down}}</td>
      </tr>
   </tbody>
</table>

Angular ng-repeat自定义过滤器2 jsons

3 个答案: