从下拉菜单中检索组合结果，但是从两个不同的角阵列中获取组合结果

Question

我在这里遇到问题，需要一些指导。我选择了我的选择，并从两个不同的Angular数据中提取匹配结果。例如，我有两个角度范围，一个叫做$scope.mSessions，另一个是$scope.cSessions。每个阵列都有不同的键，除了它们共享相同的类别，并根据我的选择使用我的<select>标记拉取常用数据。所以我<select>选项将有类别，如RED FRUIT，YELLOW FRUIT和ORANGE FRUIT，如果我选择RED FRUIT，它会经过我的阵列中mSessions和cSessions然后拉起"m_category": ["Apple", "Strawberry", "Pineapple"]和"category": [{"RED":["YES"]}]。我想我应该创建一个新的数组，将两个数据合并为一个，然后进行字符串比较，或者通过选择其中一个下拉列表来访问两个不同的数据。我无法弄清楚做这件事的最好方法是什么。请帮忙..！

这里是我的代码的jsfiddle第一http://jsfiddle.net/missggnyc/ujj18nhv/29/

HTML

<div ng-app="myFruit"> 
    <div ng-controller="fruitController"> 
    <select ng-model="selectedAnswer" ng-options="c.cat for c in mySelection"></select> {{selectedAnswer}} 
    <table> 
     <tr> 
     <td>Session Name</td> 
     <td>M Category</td>  
     </tr> 
     <tr ng-repeat="m in mSessions">   
     <td>{{m.name}}</td> 
     <td>{{m.m_category}}</td>   
     </tr> 
    </table> 
    <table> 
     <tr> 
     <td>C Category</td> 
     </tr> 
     <tr ng-repeat="c in cSessions ">   
     <td>{{c.category}}</td>   
     </tr> 
    </table> 
    </div> 
</div> 

JS

var app = angular.module("myFruit", []); 
    app.controller("fruitController", function($scope) { 
      $scope.mySelection = [ 
    {"cat": "RED FRUIT", "m_category": ["Apple", "Strawberry", "Pineapple"], "category": [{"RED":["YES"]}] }, 
    {"cat": "YELLOW FRUIT", "m_category": ["Banana", "Pineapple"], "category": [{"YELLOW": ["YES"]}] }, 
    {"cat": "ORANGE FRUIT", "m_category": ["Peach", "Nectarine"], "category": [{"ORANGE": ["YES"]}]} 
    ]; 
    $scope.mSessions = [{ 
    "id": 2, 
    "name": "BD20", 
    "m_category": ["Apple", "Strawberry", "Pineapple"] 
    }, { 
    "id": 3, 
    "name": "CS03", 
    "m_category": ["Banana", "Pineapple"] 
    }, { 
    "id": 4, 
    "name": "MIS99", 
    "m_category": ["Peach", "Nectarine"] 
    }]; 

    $scope.cSessions = [{ 
    "number": 439, 
    "name": "FDFG", 
    "category": [{"RED":["YES"]}] 
    }, { 
    "number": 34, 
    "name": "CN", 
    "category": [{"YELLOW": ["YES"]}] 
    }, { 
    "number": 44, 
    "name": "PPP", 
    "category": [{"ORANGE": ["YES"]}] 
    }]; 
}); 

Answer 1

如果要筛选都基于选择的表，然后尝试下面的代码：

工作小提琴：https://jsfiddle.net/almamun1996/5Ln0d5Lb/14/

HTML：

<div ng-app="myFruit" ng-controller="fruitController"> 
<select ng-model="selectedFruit" ng-options="c.cat for c in mySelection" ng-change="myDropdownChange(selectedFruit)"></select> <br/> 
Fruit Seleted: {{selectedFruit.cat}} 
<table> 
    <tr> 
    <td>Session Name</td> 
    <td>M Category</td>  
    </tr> 
    <tr ng-repeat="m in mSessions">   
    <td>{{m.name}}</td> 
    <td>{{m.m_category}}</td>   
    </tr> 
</table> 
<table> 
    <tr> 
    <td>C Category</td> 
    </tr> 
    <tr ng-repeat="c in cSessions ">   
    <td>{{c.category}}</td>   
    </tr> 
</table> 

JS（控制器）：

$scope.mySelection = [ 
       {"cat": "RED FRUIT", "m_category": ["Apple", "Strawberry", "Pineapple"], "category": [{"RED": ["YES"]}]}, 
       {"cat": "YELLOW FRUIT", "m_category": ["Banana", "Pineapple"], "category": [{"YELLOW": ["YES"]}]}, 
       {"cat": "ORANGE FRUIT", "m_category": ["Peach", "Nectarine"], "category": [{"ORANGE": ["YES"]}]} 
      ]; 
     $scope.mSessions = [{ 
      "id": 2, 
      "name": "BD20", 
      "m_category": ["Apple", "Strawberry", "Pineapple"] 
      }, { 
      "id": 3, 
      "name": "CS03", 
      "m_category": ["Banana", "Pineapple"] 
      }, { 
      "id": 4, 
      "name": "MIS99", 
      "m_category": ["Peach", "Nectarine"] 
      } 
    ]; 

     $scope.cSessions = [{ 
      "number": 439, 
      "name": "FDFG", 
      "category": [{"RED": ["YES"]}] 
      }, { 
      "number": 34, 
      "name": "CN", 
      "category": [{"YELLOW": ["YES"]}] 
      }, { 
      "number": 44, 
      "name": "PPP", 
      "category": [{"ORANGE": ["YES"]}] 
      } 
    ]; 

    let m_myArray = $scope.mSessions; 
    let c_myArray = $scope.cSessions; 
    $scope.myDropdownChange = function(fruitSelected){ 
     let m_myArray_inner = []; 
     let c_myArray_inner = []; 
     angular.forEach(m_myArray, function(value, key){ 
      if(areArraysEqual(fruitSelected.m_category, value.m_category)){ 
       m_myArray_inner = [{'name': value.name, 'm_category': value.m_category}] 
      } 
     }) 
     angular.forEach(c_myArray, function(value, key){ 
      if(areArraysEqual(fruitSelected.category, value.category)){ 
       c_myArray_inner = [{'category': value.category}]; 
      } 
     }) 
     $scope.mSessions = m_myArray_inner 
     $scope.cSessions = c_myArray_inner; 
    } 

    function areArraysEqual(x, y) { 
     // If both x and y are null or undefined and exactly the same 
     if (x === y) { 
      return true; 
     } 
     // If they are not strictly equal, they both need to be Objects 
     if (! (x instanceof Object) || ! (y instanceof Object)) { 
      return false; 
     } 
     // They must have the exact same prototype chain, the closest we can do is 
     // test the constructor. 
     if (x.constructor !== y.constructor) { 
      return false; 
     } 
     for (var p in x) { 
      // Inherited properties were tested using x.constructor === y.constructor 
      if (x.hasOwnProperty(p)) { 
       // Allows comparing x[ p ] and y[ p ] when set to undefined 
       if (! y.hasOwnProperty(p)) { 
        return false; 
       } 
       // If they have the same strict value or identity then they are equal 
       if (x[ p ] === y[ p ]) { 
        continue; 
       } 
       // Numbers, Strings, Functions, Booleans must be strictly equal 
       if (typeof(x[ p ]) !== "object") { 
        return false; 
       } 
       // Objects and Arrays must be tested recursively 
       if (!areArraysEqual(x[ p ], y[ p ])) { 
        return false; 
       } 
      } 
     } 
     for (p in y) { 
      // allows x[ p ] to be set to undefined 
      if (y.hasOwnProperty(p) && ! x.hasOwnProperty(p)) { 
       return false; 
      } 
     } 
     return true; 
    }