我正在尝试在 Angular JS 中使用 Javascript 中的循环打印数组

Question

我正在尝试从对象中的属性打印出每个数组项：

{
        position:"Finance Office Assistant",
        employer:"Washtenaw County Finance Department",
        location:"Ann Arbor, MI",
        start_date:"2012",
        current: false,
        end_date:"2012",
        duties: [
            "Item 1",
            "Item 2",
            "Item 3" 
        ]
    },

这个对象在一个数组中，还有其他几个对象。我正在尝试创建一个循环遍历所有对象的函数，并打印出无序列表中的 duties 数组项，其中包含列表项和数组项的确切数量。

这是我要编写的函数来完成任务

$scope.dutyList = function() {
    var arrayLength = $scope.duties.length;
    while (arrayLength > 0) {
        console.log("dutyList run")
        document.write("<li> {{ dutyList }} </li>");
        --arrayLength;
    }
}

Answer 1

一般来说，使用 Angular 这样的框架时，您不希望直接写入文档。相反，您应该使用内置的模板系统和指令来呈现您的页面。

我在这里对最终目标做了一些假设，但是，假设对象数组可以被控制器访问并附加到范围，你可以使用类似的东西打印每个位置的无序列表以下。

angular.module('myApp', []).controller('myCtrl', function($scope){
  $scope.foo = [{
        position:"Finance Office Assistant",
        employer:"Washtenaw County Finance Department",
        location:"Ann Arbor, MI",
        start_date:"2012",
        current: false,
        end_date:"2012",
        duties: [
            "Item 1",
            "Item 2",
            "Item 3" 
        ]
    }, {
        position:"Another Position",
        employer:"Another Employer",
        location:"Ann Arbor, MI",
        start_date:"2012",
        current: false,
        end_date:"2012",
        duties: [
            "2nd Object, Item 1",
            "2nd Object, Item 2",
            "2nd Object, Item 3" 
        ]
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myCtrl'>
  <div ng-repeat='bar in foo'>
    <h1>{{ bar.position }}</h1>
    <ul>
      <li ng-repeat='duty in bar.duties'>
        {{ duty }}
      </li>
    </ul>
  </div>
</div>

Answer 2

您不需要函数来处理这样显示的数据。 Angular 的 ngRepeat 就是为此而生的。要访问数据集的第二层，您可以在无序列表中嵌套两个重复项。第一个（在 div 中）重复数据的第一层，并公开第二层，在 <li> 标记中重复：

  <ul>
      <div ng-repeat="d in data">
        <li ng-repeat="duty in d.duties">{{duty}}</li>  
      </div> 
  </ul>

Plunker

我正在尝试在 Angular JS 中使用 Javascript 中的循环打印数组

I'm trying to print an array using a loop in Javascript in Angular JS

javascript

arrays

loops

while-loop

angularjs