如何使用ng-repeat:Angularjs？

Question

如何使用ng-repeat:Angularjs？

Kon*_*dal 6 javascript angularjs angularjs-ng-repeat

angular.js ng-repeat具有html内容的项目

我有很多学院,位置和密码详细信息,但我现在默认显示html内容.显示大学,地点和pincodes的列表.任何人都可以在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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Kar*_* RP 8

考虑控制器中有变量,如下所示

$scope.college_data = [{name: 'College 1', location:'Location 1', pincode:'499949'}, {name: 'College 2', location:'Location 2', pincode:'373737'}]

Run Code Online (Sandbox Code Playgroud)

这就是你要做的.

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

Run Code Online (Sandbox Code Playgroud)

查看官方文档了解更多信息.AngularJS重复

Answer 2

Var*_*eja 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
    }
  ];
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我为您创建了一个简单的演示： https ://jsfiddle.net/varunsukheja/tLy451fx/

ng-repeat 的语法与 for 循环非常相似， for name in nameList 类似ng-repeat='name in nameList'

归档时间：	9 年，3 月前
查看次数：	752 次
最近记录：	8 年，9 月前