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

Question

我的目标是让用户选择 Object 中的哪个数组将被迭代并在 DOM 中显示数据。

所以有 17 种不同的卡片组，这些数组中是该类型的所有卡片。在我设置 limitTo: 2 的那一刻，我从每组中得到 2 张卡片。所以，2 个来自基本，2 个来自战场等

我希望用户选择要循环访问这些卡组中的哪些卡组，因此只有特定卡组的金额 limitTo 设置为

我的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";
        });
});

总而言之，我希望 select 菜单中的选项可以将 cardArr ro 中的卡片更改为 cardarr.Basic 以仅遍历基本卡片，

我要taget里面的代码：

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

这是收集的数据示例

Answer 1

要select一个特定的卡组使用：

<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>

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

Several <option> in <select> to change location where the ng-repeat get data

html

angularjs

angularjs-ng-repeat