Question

在我缺乏英语的情况下甚至无法写出主题。所以在这里，我有两个由colorid连接的对象：

   $scope.fruits = {{name:"apple",colorid:"1"},etc};
   $scope.colors = {{id:"1",value:"red"};

我使用ng-repeat

构建了一个包含搜索和过滤器的漂亮表格

   ng-repeat="fruit in fruits | orderBy:sortType:sortReverse | filter:search"

我想要实现的是......当我搜索/过滤“红色”时，仍然可以查看“苹果”..

编辑：显然，ng-repeat与第二个对象“colors”没有联系，最简单的解决方案是迭代每个“fruit”并在“fruits”对象本身中推送它的颜色值（红色），因此当搜索/过滤“红色”时，“苹果”对象仍然在搜索表中可见。但我假设连接表及其关系ID可能有一些“角度”解决方案。

Answer 1

如果我理解得很好，那么你正在尝试连接＆＃34;你的阵列。所以你可以嵌套ngRepeat，如下所示：

＆＃13;

(function() {
  "use strict";

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.fruits = [  
       {  
          "name":"apple",
          "colorid":1
       },
       {  
          "name":"mango",
          "colorid":2
       },
       {  
          "name":"papaya",
          "colorid":3
       }
    ];
    
    $scope.colors = [  
       {  
          "id":"1",
          "value":"red"
       },
       {  
          "id":2,
          "value":"green"
       },
       {  
          "id":3,
          "value":"yellow"
       }
    ];
  }
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="MainCtrl">
  <input type="text" class="form-control" ng-model="search" placeholder="Search...">
  <ul ng-repeat="fruit in fruits track by $index">
    <li ng-if="filtered.length" ng-bind="fruit.name"></li>
    <ul>
      <li ng-repeat="color in colors | filter: { id: fruit.colorid } | filter: search as filtered track by $index" ng-bind="color.value">
      </li>
    </ul>
  </ul>
</body>

</html>

＆＃13;

Angularjs - 按搜索值过滤对象，但如果搜索值在第二个对象中，则不要省略

1 个答案: