<select>中的几个<option>可以更改ng-repeat获取数据的位置

Question

我的目标是让用户选择Object中要迭代的数组，并在DOM中显示数据。

因此，有17种不同的卡集，并且在这些阵列内是该类型的所有卡。当我设置limitTo：2时，我从每组中获得2张牌。因此，Basic中有2个，Battlegrounds中有2个，等等。

我希望用户选择要迭代的卡组中的哪一个，因此仅将那个特定卡组的limitLimitTo设置为

我的HTML：

<select ng-model="statsSortering">                        
    <option ng-selected="sortBy('card.name')" value="name" selected>Namn</option>
    <option ng-selected="sortBy('card.attack')" value="attack">attack</option>
    <option ng-selected="sortBy('card.cost')" value="cost">Kostnad</option>
</select>

<div ng-repeat="(key, cardArr) in dataObj">
    <ul>
        <li ng-repeat="card in cardArr | orderBy: statsSortering | limitTo: 10">
            <span>{{card.name}}</span>
            <p>{{card.cardSet}}, {{card.type}}, {{card.playerClass}}</p>
        </li>
    </ul>
</div>

我的控制器：

var produkterControllers = angular.module('myApp', [])

.controller('minApiFunktionController', function myController($scope, $http) {
    var url = "https://omgvamp-hearthstone-v1.p.rapidapi.com/cards";
    var headers = {
        "x-rapidapi-host": "omgvamp-hearthstone-v1.p.rapidapi.com",
        "x-rapidapi-key": "8ad5a16c67mshed80ba15c31ab54p141ec5jsnfbff6480fd40"
    };
    var options = {
        headers
    };

    $http.get(url, options)
        .then(function (response) {
            var data = response.data;
            console.log('this is the data, ', data);
            $scope.dataObj = data;
            $scope.statsSortering = "name";
        });
});

因此，总结一下，我希望选择菜单中的选项可以将cardArr中的卡更改为cardarr。基本只是遍历Basic卡，

我想标记其中的代码：

<li ng-repeat="card in cardArr | orderBy: statsSortering | limitTo: 10">

以下是收集的数据示例

Answer 1

要选择特定的卡套，请使用：

<select ng-model="cardSetName">
    <option value="">Select Card Set...</option>
    <option ng-repeat="(key, value) in dataObj" ng-value="key">{{key}}</option>
</select>

<select ng-model="statsSortering">                        
    <option value="name" selected>Namn</option>
    <option value="attack">attack</option>
    <option value="cost">Kostnad</option>
</select>

<ul>
    <li ng-repeat="dataObj[cardSetName] | orderBy: statsSortering | limitTo: 10">
        <span>{{card.name}}</span>
        <p>{{card.cardSet}}, {{card.type}}, {{card.playerClass}}</p>
    </li>
</ul>