Question

我有一个像这样的对象：

var examples = {
    'example1': {
        ex1: {},
        ex2: {},
        ex3: {}
    },
    'example2': {
        ex1: {},
        ex2: {},
        ex3: {}
    }
}

有一个链接到函数的按钮，它在第一次单击时为example1对象填充值，在第二次单击时填充example2对象。

首先点击：example1获取值。
第二次点击：example2 get values。

然后我使用ng-repeat循环遍历对象，如下所示：

data-ng-repeat="example in examples.example1.ex1"
data-ng-repeat="example in examples.example1.ex2"
data-ng-repeat="example in examples.example1.ex3"

这里的问题是，我需要ng-repeat以某种方式更改并循环遍历example2对象以及第二次单击该按钮时。所以我的问题是，有没有办法动态改变ng-repeat？

编辑：目标是在第一次点击后显示第一个列表，然后在第二次点击后一起显示两个列表。

我尝试使用值2制作$ scope并将其放入ng-repeat中，但这并不起作用。

$scope.counter = 2; //in a controller
data-ng-repeat="example in examples.example(counter).ex1"

Answer 1

使用动态媒体资源名称

$scope.prop = 'example1';
$scope.click = function (newProp) {
    $scope.prop = newProp;
    // do whatever you want here 
    // change prop to example2 or 
    // or simply toggle Boolean to change prop text
}

在html中使用

ng-repeat="example in examples[prop].ex1"

Answer 2

是否可以通过“示例”循环，然后在ng-repeat内部进行ng-repeat？

这样的事情：

<div data-ng-repeat="example in examples">
    <div data-ng-repeat="ext in example">
        {{ext.ex1}} {{ext.ex2}} {{ext.ex3}}
    </div>
</div>

Answer 3

在html中做一些像Jannik的答案，在JS中做这个：

$scope.examples = {};
function example(exes) {
    this.exes = exes;
}
$scope.onClick = function(exes) {
    $scope.examples.push(new example(exes));
}

exes是ex1，ex2等的列表。您可能需要一个$ scope。$ apply（）来更新UI。

动态改变ng-repeat

3 个答案: