如何遍历Angular中的数组? [英] How to iterate through an array in Angular?

问题描述

我是Angular的新手.我想做的是在页面上显示对象数组中的数据，并提供按钮让用户在下一个/上一个数组项上移动.

I'm new to Angular. What I want to do is display data from an array of objects on the page and provide buttons for the user to move on the next/previous array item.

假设我们的数组是:

var destinations = [
    {
      name: "Rome",
      weather: "sunny",
      price: "$2999"
    },
    {
      name: "Paris",
      weather: "cloudy",
      price: "$4500"
    }
];

如果我想用HTML显示它，我可以编写 {{destinations [1] .name}} ，它可以工作，但是如何使它动态化呢?我尝试在控制器中定义 i 变量，然后将 [i] 插入HTML指令，但这不起作用.

If I want to display it in HTML, I can write {{destinations[1].name}} and it works, but how do I make this dynamic? I tried defining an i variable in the controller and inserting [i] into the HTML directive, but that doesn't work.

我该如何进行这项工作?

How can I make this work?

推荐答案

使用范围成员表示当前项目.

Use a member of the scope to represent the current item.

<div data-ng-app="exampleModule" data-ng-controller="exampleController">
  <div>
    <button data-ng-click="changeDestination(1)">
      Next
    </button>
    <button data-ng-click="changeDestination(-1)">
      Prev
    </button>
  </div>
  <div class="dest-container">
    <div class="dest-field dest-price-field">  
      <div class="dest-title">Price:</div>
      <div class="dest-content">{{ current.price }}</div>
    </div>
    <div class="dest-field dest-name-field">  
      <div class="dest-title">Name:</div>
      <div class="dest-content">{{ current.name }}</div>
    </div>

    <div class="dest-field dest-weather-field">  
      <div class="dest-title">Weather:</div>
      <div class="dest-content">{{ current.weather }}</div>
    </div>
  </div>
</div>

这将创建一个显示，显示 $ scope.current .

This will create a one display, displaying $scope.current.

我已经创建了有关目标数组的最小完整示例.

(function(angular) {
  "use strict";

  var exampleModule = angular.module('exampleModule', []);
  exampleModule.controller('exampleController', ['$scope', function($scope) {
    $scope.destinations = [
      {
        name: "Rome",
        weather: "sunny",
        price: "$2999"
      },
      {
        name: "Paris",
        weather: "cloudy",
        price: "$4500"
      }
    ];

    $scope.currentItem = 0;
    $scope.current = $scope.destinations[$scope.currentItem];

    $scope.changeDestination = function(diff) {
      $scope.currentItem += diff;

      if ($scope.destinations.length) {
        while ($scope.currentItem >= $scope.destinations.length)
          $scope.currentItem -= $scope.destinations.length;
        while ($scope.currentItem < 0)
          $scope.currentItem += $scope.destinations.length;
      } else {
        $scope.currentItem = 0;
      }
      $scope.current = $scope.destinations[$scope.currentItem];
    };
  }]);
}(angular));

该页面会在运行javascript代码之前加载AngularJS 1.4.8.

The page loads AngularJS 1.4.8 before running the javascript code.

同一事物可以用于一系列项目，您可以对数组进行切片，并在 $ scope.current 中设置一个数组，然后使用 ng-repeat 显示要实现分页的项目.

The same thing can be used for a range of items, you can slice the array and set an array in $scope.current then use ng-repeat to show the items to implement pagination.

这篇关于如何遍历Angular中的数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！