Извлечение комбинированного результата из раскрывающегося списка, но из двух разных угловых массивов

Question

У меня возникла проблема здесь и нужно какое-то направление. У меня есть раскрывающийся список, где я выбираю свой выбор, и он вытащит соответствующий результат из двух разных угловых данных. Например, у меня есть две угловые области, одна называется $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; 
    }