angular 逐一渲染模型

Question

假设我有一个 JSON 的汽车列表：

{
  "company": "Mercedes",
  "cars": 
  [{
    "idCar": 1,
    "Name": car 1,
    "img":"..."
  },{
    "idCar": 2,
    "Name": car 2,
    "img":"..."
  },{
    "idCar": 3,
    "Name": car 3,
    "img":"..."
  },{
    "idCar": 4,
    "Name": car 4,
    "img":"..."
  },{
    "idCar": 5,
    "Name": car 5,
    "img":"..."
  }]
}

我正在做一个 Angular 应用程序，用户可以在其中按下一个按钮来显示这些汽车，但用户一次只能看到一辆车，当他看完这辆车的规格时，他可以单击 "next" 按钮，然后应显示下一辆车，依此类推。

现在您可能会注意到我是 Angular 的初学者，我想知道是否有办法做到这一点。

提前谢谢你。

Answer 1

这是一个非常基础的 Angular 问题。这应该会让您朝着正确的方向前进：

app.controller("MyCtrl", ["$scope", function ($scope) {

    $scope.company = {
        company: "Mercedes",
        cars: [
            { "idCar": 1, "Name": "car 1", "img": "http://lorempixel.com/200/200" },
            { "idCar": 2, "Name": "car 2", "img": "http://lorempixel.com/200/200" },
            { "idCar": 3, "Name": "car 3", "img": "http://lorempixel.com/200/200" },
            { "idCar": 4, "Name": "car 4", "img": "http://lorempixel.com/200/200" },
            { "idCar": 5, "Name": "car 5", "img": "http://lorempixel.com/200/200" }
        ]
    };

    $scope.currentIndex = 0;
    $scope.currentCar = $scope.company.cars[$scope.currentIndex];

    $scope.nextCar = function() {
        $scope.currentIndex++;

        if ($scope.currentIndex >= $scope.company.cars.length) {
            $scope.currentIndex = 0;   
        }

        $scope.currentCar = $scope.company.cars[$scope.currentIndex];
    }
}]);

查看：

<div>
    <h1>{{ currentCar.Name }}</h1>
    <img ng-src="{{ currentCar.img }}" />
</div>
<button ng-click="nextCar()">Next</button>

示例：jsfiddle

angular 逐一渲染模型

angular render model one by one

views

render

angularjs