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

【问题标题】：Angular ng-repeat custom filter 2 jsonsAngular ng-repeat 自定义过滤器 2 jsons
【发布时间】：2017-06-11 18:43:04
【问题描述】：

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

第一个json“名称”：

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

        },

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

第二个json“数据”：

[
        {
            "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>

所以我尝试做自定义过滤器，它只列出来自{{names.name}} 的同名旁边的{{datas[0].data}}。在我的表中应该是 AAAAAA 旁边的 AAAAAA。但是我的代码不起作用。提前感谢您的提示和答案！

【问题讨论】：

对数组应用过滤器。 datas[0].data 是一个元素。 docs.angularjs.org/api/ng/filter/filter

标签： angularjs json filter ng-repeat

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

【讨论】：

【解决方案2】：

过滤器：

.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>

【讨论】：

当您尝试快速时会发生这种情况。你说的对。我已经编辑了我的答案。

【解决方案3】：

如果您知道数据中只有一个元素会匹配名称中的元素，请使用 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/

【讨论】：