在Angular ng-repeat中添加一个计数器?

时间:2016-01-19 22:50:59

标签: javascript html angularjs json

我正在尝试找到一些文档,以便能够将计数的数字附加到ng-repeat返回的每个项目中。对于Angular来说,这不是一个开箱即用的东西吗?不太像Id,但更像是,如果返回4个项目,每个项目JSON对象可以在返回的数据前面添加一个数字。我的代码如下:

<div  class="swipeBoxes" ng-repeat="swipe in swipes">
    <a href="#">
        <div class="swipeBox">
            <span class="swipeNum"></span>
            <p><span>swipe date:</span><span>{{ swipe.date | date: 'MM/dd/yyyy'}}</span></p>
            <p><span>provider:</span><span>{{ swipe.merchant }}</span></p>
            <p><span>amount:</span><span>{{ swipe.amount | currency }}</span></p>
        </div>
    </a>
</div>

2 个答案:

答案 0 :(得分:6)

您可以使用$index作为计数器。

public class Main extends Application {

    private ObservableQueue<String> queue = new ObservableQueue<>(new LinkedBlockingQueue<>());

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button("Add to queue");
        btn.setOnAction(event -> queue.add("value"));

        Button btn2 = new Button("Remove to queue");
        btn2.setOnAction(event -> queue.remove());

        Button btn3 = new Button("Button");
        btn3.disableProperty().bind(Bindings.createBooleanBinding(queue::isEmpty, queue));

        FlowPane root = new FlowPane();
        root.getChildren().addAll(btn, btn2, btn3);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

答案 1 :(得分:2)

使用ngRepeat中的$index应该可以解决您的问题。