Arrays 如何以角度遍历数组？

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

假设我们的阵列是：

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

如果我想在HTML中显示它，我可以编写

{{destinations[1].name}}

，它可以工作，但是我如何使它成为动态的？我尝试在控制器中定义一个

I

变量，并将

[I]

插入HTML指令，但这不起作用

我怎样才能做到这一点？

<div ng-repeat="dest in destinations">
{{name}}
</div>

{{name}}

---

一种方法是，记住目的地必须是html中控制器作用域的一部分

<div ng-repeat="destination in destinations">{{destination}}</div>

---

使用范围的成员来表示当前项

HTML 在运行javascript代码之前，页面将加载AngularJS 1.4.8

同样的东西也可以用于一系列项目，您可以在

$scope.current

中设置一个数组，然后使用

ng repeat

来显示要实现分页的项目。

 <div ng-repeat="value in destinations">
       <p>
       <span>{{value.name}}</span>
       <span>{{value.weather}}</span>
       <span>{{value.price}}</span>
       </p>
 </div>


{{value.name}
{{value.weather}
{{value.price}}

大多数教程将向您展示如何使用

ng repeat

。在提出这个问题之前，我们应该做更多的研究。这是一个很好的问题。有时候你甚至不知道要搜索什么才能找到ng-repeat。哇，我才意识到你的问题与重复无关。。。更新我的答案更新后的答案应该能真正回答这个问题。太好了，谢谢@doug65536！我知道ng repeat，但没有使用它，因为我一次只想显示一个实例。{{name}在这里不起作用。。。你需要{{dest.name}。

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

(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));

 <div ng-repeat="value in destinations">
       <p>
       <span>{{value.name}}</span>
       <span>{{value.weather}}</span>
       <span>{{value.price}}</span>
       </p>
 </div>