AngularJS ng-repeat individuelle Struktur

Ich habe ein Datensatz wie dieseAngularJS ng-repeat individuelle Struktur

$scope.dataset= [ 
    {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, 
    {"Name":"Ana Trujillo","City":"México D.F.","Country":"Mexico"}, 
    {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, 
    {"Name":"Around the Horn","City":"London","Country":"UK"} 
];

ich das auf diese Weise Link zu diesem

<div> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     ....... 
 
     ....... 
 
     </div> 
 
     <div class="col-md-6"> 
 
     ....... 
 
     ....... 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     ....... 
 
     ....... 
 
     </div> 
 
     <div class="col-md-6"> 
 
     ....... 
 
     ....... 
 
     </div> 
 
    </div> 
 

 
    ...... 
 
    ...... 
 
</div>

ich das erreichen kann drucken möchten durch Schneiden Sie den Datensatz durch zwei Teile von Paketen. Aber mein Problem ist, ich habe einige Operationen wie Sortieren, Filter über den Datensatz.

Bitte helfen Sie mir, dieses Problem zu lösen.

Quelle

2017-02-05 Saikat Guin

welches Ergebnis am Ende, was wollen Sie –

gedruckt werden Ich möchte Name, Stadt und Land wie die HTML-Struktur drucken. Ich habe versucht, ng-repeat auf der "class = row" div. Aber es erfüllt meine Anforderung nicht voll. Ich möchte zwei Datensätze in einer Zeile drucken. Ich möchte nur eine ng-Wiederholung verwenden. –

Wo ist Ihr anderer Datensatz und können Sie Ihre Ausgabe in einfachen HTML-Code zeigen, so dass wir Ihnen helfen können – nivas

Soweit ich verstehe, ist das, was Sie versuchen zu erreichen.Siehe das Ergebnis auf der ganzen Seite. Wenn Sie mehr als ein Dataset wie $ scope.dataset1, $ scope.dataset2 haben, können Sie mit der Funktion $ .merge (dataset1, dataset2) oder angular.merge ({}, dataset1, dataset2) zusammenführen und dann Filter anwenden.
Bearbeiten:
Ich modifizierte den Code wie in der jsfiddle. Das Ergebnis sehen Sie in voller Seite

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

 
app.controller("MainCtrl", function ($scope) { 
 
    $scope.dataset= [ 
 
    {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, 
 
    {"Name":"Ana Trujillo","City":"México D.F.","Country":"Mexico"}, 
 
    {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, 
 
    {"Name":"Around the Horn","City":"London","Country":"UK"} 
 
]; 
 
    $scope.dataset2= [ 
 
    {"Name":"Alfreds Futterkiste1","City":"Berlin","Country":"Germany"}, 
 
    {"Name":"Ana Trujillo1","City":"México D.F.","Country":"Mexico"}, 
 
    {"Name":"Antonio Moreno Taquería1","City":"México D.F.","Country":"Mexico"}, 
 
    {"Name":"Around the Horn1","City":"London","Country":"UK"} 
 
]; 
 
});

.color{ 
 
     background-color: beige; 
 
      margin-bottom: 13px; 
 
}

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
</head> 
 
    <body ng-controller="MainCtrl"> 
 
    <div class="container"> 
 
     <div class="row color"> 
 
     <div ng-repeat="c in dataset"> 
 
      <div class="col-sm-3 col-md-3"> 
 
      <div class="row">{{c.Name}}</div> 
 
      <div class="row">{{c.City}}</div> 
 
      <div class="row">{{c.Country}}</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <br /> 
 
     <div class="row color"> 
 
     <div ng-repeat="c in dataset2"> 
 
      <div class="col-sm-3 col-md-3"> 
 
      <div class="row">{{c.Name}}</div> 
 
      <div class="row">{{c.City}}</div> 
 
      <div class="row">{{c.Country}}</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-02-05 06:51:47 nivas

Hier ist die HTML-Struktur, die ich so drucken möchte https://jsfiddle.net/nw9bqeho/ –

@nivas ich die Daten wie diese wollen.

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
</head> 
 
    <body ng-controller="MainCtrl"> 
 
    <div class="container"> 
 
     <div> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <div class="col-sm-4 col-md-4">Alfreds</div> 
 
      <div class="col-sm-4 col-md-4">Berlin</div> 
 
      <div class="col-sm-4 col-md-4">Germany</div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <div class="col-sm-4 col-md-4">Ana Trujillo</div> 
 
      <div class="col-sm-4 col-md-4">Berlin</div> 
 
      <div class="col-sm-4 col-md-4">Germany</div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <div class="col-sm-4 col-md-4">Alfreds1</div> 
 
      <div class="col-sm-4 col-md-4">Berlin</div> 
 
      <div class="col-sm-4 col-md-4">Germany</div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <div class="col-sm-4 col-md-4">Ana Trujillo1</div> 
 
      <div class="col-sm-4 col-md-4">Berlin</div> 
 
      <div class="col-sm-4 col-md-4">Germany</div> 
 
     </div> 
 
     </div> 
 
     
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <div class="col-sm-4 col-md-4">Alfreds2</div> 
 
      <div class="col-sm-4 col-md-4">Berlin</div> 
 
      <div class="col-sm-4 col-md-4">Germany</div> 
 
     </div> 
 
     
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-02-05 07:13:32

@nivas Ich habe nur einen Datensatz. Mit einem Datensatz muss ich ng-repeat so ausführen, dass die Ausgabe wie folgt gedruckt wird: https://jsfiddle.net/nw9bqeho/ –

Ich habe eine schnelle Frage, wie viele Zeilen Sie so drucken möchten und was der Unterschied zwischen ihnen ist – nivas

try this: 


    <head> 
     <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> 
<style> 
     th , td { 
      display: block; 
     } 
     tr { display: block; float: left; } 
     .color { 
      background-color: beige; 
      margin-bottom: 13px; 
     } 

     .one-row { 
      display: inline-block; 
     } 
    </style> 
    </head> 
    <body ng-app="yourApp"> 
     <div ng-controller="yourControllerName"> 
      <table border="1"> 
       <tr> 
        <th>Name</th> 
        <th>City</th> 
        <th>Country</th> 
       </tr> 
       <tr ng-repeat="data in yourDatasetName" class="color"> 
        <td>{{data.Name}}</td> 
        <td>{{data.City}}</td> 
        <td>{{data.Country}}</td> 
       </tr> 
      </table> 
     </div> 
     <script> 
      var mainApp = angular.module("yourApp",[]); 
      mainApp.controller("yourControllerName", function ($scope) { 
      $scope.yourDatasetName= [ 
       {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, 
       {"Name":"Ana Trujillo","City":"México D.F.","Country":"Mexico"}, 
       {"Name":"Antonio Moreno Taquería","City":"México  D.F.","Country":"Mexico"}, 
       {"Name":"Around the Horn","City":"London","Country":"UK"} 
      ]; 
      }); 
     </script> 
    </body>

Quelle

2017-02-05 07:18:32 Sanaz

Ich möchte die Daten wie folgt https://jsfiddle.net/nw9bqeho/ ausdrucken. –

diesen Code hinzufügen: – Sanaz

Ich habe meine Antwort geändert, haben Sie das versucht? @SaikatGuin – Sanaz

AngularJS ng-repeat individuelle Struktur

Antwort

Verwandte Themen