logo标签列表

如何使用ng-repeat：AngularJS？

javascriptangularjsangularjs-ng-repeat
7

angular.js ng-repeat 可以用于展示带有 HTML 内容的项目

我有很多学院、位置和邮政编码的细节，但默认情况下我正在显示 HTML 内容。如何显示学院、位置和邮政编码列表？有人能在 plunker 中给我一个例子吗？

使用 ng-repeat 指令

 <body ng-app="task">
    <div ng-controller="AppCtrl" ng-cloak>
     <md-content class="md-padding">
        <div>
            <md-card-title layout="row" layout-align="start">
                <md-checkbox md-no-ink aria-label="" ng-model="data.cb5"   class="md-default">
                </md-checkbox>
                <md-card-title-text layout="column">
                    <span class="md-headline">Maturi venkata subbarao engg college</span>
                    <span class="md-subhead">Nadergul,Hyderabad,Telangana 501510</span>
                </md-card-title-text>
            </md-card-title>
        </div>
    </md-content>
</div>

1
在您想要重复的元素上设置ng-repeat。可能是类似于<div ng-repeat="item in items"><md-card-title>..</div>这样的东西。请阅读文档。 - devqon
6个回答
8
考虑您在控制器中有以下变量，即
$scope.college_data = [{name: 'College 1', location:'Location 1', pincode:'499949'}, {name: 'College 2', location:'Location 2', pincode:'373737'}]

这是您需要做的事情。
 <body ng-app="task">
 <div ng-controller="AppCtrl" ng-cloak>
 <md-content class="md-padding">
    <div ng-repeat="college in college_data">
        <md-card-title layout="row" layout-align="start">
            <md-checkbox md-no-ink aria-label="" ng-model="college.cb5" class="md-default">
            </md-checkbox>
            <md-card-title-text layout="column">
                <span class="md-headline">{{college.name}}</span>
                <span class="md-subhead">{{college.location}}, {{college.pincode}}</span>
            </md-card-title-text>
        </md-card-title>
    </div>
</md-content>

请查看官方文档获取更多信息。AngularJS重复
4

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.title = 'Welcome to see ng-repeat usage';
  $scope.myObj = [{
      college: 'Maturi',
      location: 'venkata subbarao engg college',
      pincode: 76003
    },
    {
      college: 'Nadergul',
      location: 'Hyderabad,Telangana',
      pincode: 501510
    },
    {
      college: 'LNCT',
      location: 'bhopal',
      pincode: 411001
    },
    {
      college: 'Imperial',
      location: 'Mumbai,India',
      pincode: 4110008
    }
  ];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="MyCtrl">
  <div>
    {{title}}
    <div ng-repeat='obj in myObj'>
      College: {{obj.college}} Location: {{obj.location}} Pincode: {{obj.pincode}}
      <br />
      <span>----------------------------------</span>
    </div>
  </div>
</body>

我为您创建了一个简单的演示： https://jsfiddle.net/varunsukheja/tLy451fx/ ng-repeat的语法与for循环非常相似，例如 for name in nameList 类似地，ng-repeat='name in nameList'
与其依赖外部网站，您应该将演示包含在此处，可能作为 Stack Snippet。 - Nathan Tuggy
感谢 @Nathan Tuggy，我会做同样的事情。 - Varun Sukheja
4
在下面添加ng-repeat如下：
<body ng-app="task">
    <div ng-controller="AppCtrl" ng-cloak>
     <md-content class="md-padding">
        <div ng-repeat="item in dataItems">
            <md-card-title layout="row" layout-align="start">
                <md-checkbox md-no-ink aria-label="" ng-model="item.cb5"   class="md-default">
                </md-checkbox>
                <md-card-title-text layout="column">
                    <span class="md-headline">{{item.Name}}</span>
                    <span class="md-subhead">{{item.location}}</span>
                </md-card-title-text>
            </md-card-title>
        </div>
    </md-content>
</div>
3

我希望这能对你有所帮助。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.clg_info = [
   {name: 'College 1', location:'Location 1', pincode:'499949'},
   {name: 'College 2', location:'Location 2', pincode:'373737'},
   {name: 'College 3', location:'Location 3', pincode:'499949'},
   {name: 'College 4', location:'Location 4', pincode:'373737'}]
});
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js" ></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css" />
</head>

<body ng-app="myApp">
  <div ng-controller="myCtrl">
     <div ng-repeat ="clg in clg_info">
      <md-card-title layout="row" layout-align="start">
         <md-checkbox md-no-ink aria-label="" ng-model="college.cb5" class="md-default">
         </md-checkbox>
            <md-card-title-text layout="column">
                <span class="md-headline">{{clg.name}}</span>
                <span class="md-subhead">{{clg.location}}, {{clg.pincode}}</span>
            </md-card-title-text>
        </md-card-title>
     </div>
   </div>
 </body> 
</html>

2
请访问：https://docs.angularjs.org/api/ng/directive/ngRepeat 也许还有：http://embed.plnkr.co/Rbj3pw/ http://jsfiddle.net/razh/3mwjr/ 
<div ng-repeat="model in collection | orderBy: 'id' as filtered_result">
  {{model.name}}

</div>

这个想法是为了在集合中为所有项目重复相同的HTML标签。 我也喜欢orderBy。 管道（|）应用于前一个对象（集合）。 在示例中，我们将orderBy“id”应用于集合。 如果您需要在代码中稍后访问过滤后的数据，则通常使用“as filteredResult”，一旦声明了它，您可以在app.js中访问filteredResult对象。

顺便说一句，这与Laravel / ASPNET-CSHTML中的@foreach或d3js中的.enter()非常相似

1
如果您想重复执行10次，可以在控制器中定义如下内容：
$scope.num_of_repeat = 10;
$scope.array = {};
var i = 0;
for (i=0;i<$scope.num_of_repeat-1;i++)
{
 $scope.array[i] = i;
}

在HTML代码中，<span ng-repeat="arr in array" class="md-headline">Maturi venkata subbarao engg college</span>表示重复渲染数组中的元素，并将其显示为标题。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接