Question

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

我们说我们的数组是：

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

如果我想在HTML中显示它，我可以编写{{destinations[1].name}}并且它可以正常工作，但是如何让它变得动态？我尝试在控制器中定义i变量并将[i]插入到HTML指令中，但这并不起作用。

我该如何做到这一点？

Answer 1

在你的HTML中使用ng-repeat

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

或在控制器中，您可以使用

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

Answer 2

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

HTML

Matrix.multiplyMM(mMatrixFinal, 0, mProjectionMatrix, 0, mMVPMatrix, 0);
GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mMatrixFinal, 0);

这将创建一个显示，显示<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>。

我创建了a minimal complete example with your destination array。

的Javascript

$scope.current

页面在运行javascript代码之前加载AngularJS 1.4.8。

同样的内容可以用于一系列项目，您可以slice the array并在(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));中设置一个数组，然后使用$scope.current来显示实现分页的项目。

Answer 3

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

Answer 4

[XmlType("struct")]
public class ResponseStruct
{
    [XmlElement("member")]
    public List<ResponseMember> Struct { get; set; }
}

[XmlType("array")]
public class ResponseArray
{
    [XmlElement("data")]
    public List<ResponseMemberValue> Array { get; set; }
}

public class ResponseMember
{
    [XmlElement("name")]
    public string Name { get; set; }

    [XmlElement("value")]
    public ResponseMemberValue Value { get; set; }
}

public class ResponseMemberValue
{
    [XmlChoiceIdentifier("ValueChoice")]
    [XmlElement("boolean", typeof(bool)), 
    XmlElement("int", typeof(int)), 
    XmlElement("string", typeof(string)), 
    XmlElement("datetime", typeof(DateTime)), 
    XmlElement("double", typeof(double)), 
    XmlElement("base64", typeof(string)), 
    XmlElement(typeof(ResponseArray)), 
    XmlElement(typeof(ResponseStruct))]
    public object Value { get; set; }

    [XmlIgnore]
    public virtual ValueType ValueChoice { get; set; }

    public enum ValueType
    {
        @string,
        @int,
        @datetime,
        @double,
        base64,
        array,
        boolean,
        @struct
    }
}

将是一种方式，记住目的地必须是控制器范围的一部分

如何在Angular中迭代数组？

4 个答案:

HTML

的Javascript