javascript - 从下拉列表中检索两个不同的 Angular 数组的组合结果

Question

我遇到了问题，需要一些指导。我有一个下拉菜单，可以在其中选择我的选择，它将从两个不同的 Angular 数据中提取匹配结果。例如，我有两个 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

如果您想根据选择过滤两个表，请尝试以下代码:

工作 fiddle :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( Controller ):

$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;
    }