动态改变ng重复

dynamically change ng-repeat

本文关键字：重复 ng 改变 动态      更新时间：2023-09-26

我有一个这样的对象：

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

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

  • 首先点击：example1获取值
  • 第二次点击：example2获取值

然后我使用ng重复遍历对象，如下所示：

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重复？

编辑：目标是在第一次单击后显示的第一个列表，然后在第二次单击后同时显示的两个列表。

我试图制作一个值为2的$scope，并将其放入ng repeat中，但没有成功。

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

使用动态属性名称

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

是否可以通过"examples"进行循环，然后在ng repeat中包含一个ng重复？

类似这样的东西：

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

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

相关文章：