Jak korzystać z polecenia ng-repeat: Angularjs?

angularjs ng powtarzania przedmiotów z zawartością htmlJak korzystać z polecenia ng-repeat: Angularjs?

Mam wiele uczelni, lokalizacji i kodu PIN szczegółów, ale jestem teraz przez pokazywanie zawartości domyślnej html .jak do listy kolegiów, lokalizacji i pincodes.Can nikogo Show mi przykład w plunker

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

Źródło

2017-02-06 Kondal

Ustaw 'ng-repeat' na elemencie, który chcesz powtórzyć. Prawdopodobnie coś w rodzaju '

'. Przeczytaj [dokumentacja] (https://docs.angularjs.org/api/ng/directive/ngRepeat) – devqon

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>

Stworzyłem prostą demo dla Ciebie: https://jsfiddle.net/varunsukheja/tLy451fx/

ng-repeat ma składnię bardzo podobny do pętli, jak for name in nameList podobnie ng-repeat='name in nameList'

Źródło

2017-08-20 20:38:47

Zamiast polegać na zewnętrznej witrynie, powinieneś umieścić tutaj wersję demonstracyjną, być może jako [fragment fragmentu stosu] (https) : //stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/). –

Dzięki @ Nathan Tuggy zrobi to samo. –

Dodaj nG-repeat jak poniżej,

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

Źródło

2017-02-06 12:12:05

Jeśli chcesz powtórzyć na przykład 10 razy, w kontrolerze określić

$scope.num_of_repeat = 10; 
$scope.array = {}; 
var i = 0; 
for (i=0;i<$scope.num_of_repeat-1;i++) 
{ 
$scope.array[i] = i; 
}

w kodzie html <span ng-repeat="arr in array" class="md-headline">Maturi venkata subbarao engg college</span>

Źródło

2017-02-06 12:16:30

Rozważyć masz zmienne w kontrolerze jak poniżej, tj

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

To właśnie możesz zrobić.,

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

Sprawdź oficjalny dokument, aby uzyskać więcej informacji. AngularJS Repeat

Źródło

2017-08-16 07:39:34

Mam nadzieję, że to ci pomoże.

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>

Źródło

2017-08-21 07:30:10

proszę odwiedzić: https://docs.angularjs.org/api/ng/directive/ngRepeat

a może: http://embed.plnkr.co/Rbj3pw/ http://jsfiddle.net/razh/3mwjr/

<div ng-repeat="model in collection | orderBy: 'id' as filtered_result"> 
    {{model.name}} 

</div>

Ideą jest, aby powtórzyć ten sam tag HTML dla wszystkich elementów w kolekcji . Ja też lubię | Zamów przez. Rura (|) dotyczy poprzedniego obiektu (kolekcja). W tym przykładzie stosujemy orderBy 'id' do kolekcji. Jeśli potrzebujesz późniejszego dostępu do kodu w filtrowanych danych, często używasz "as filteredResult", gdy zadeklarujesz, że możesz uzyskać dostęp do app.js obiektu filtersResult.

BTW. Jest bardzo podobny do @foreach w Laravel/ASPNET-CSHTML lub.enter() in d3js

Źródło

2017-08-22 14:22:48

Jak korzystać z polecenia ng-repeat: Angularjs?

Odpowiedz

Powiązane problemy