1. дома
  2. Вопрос и ответ
  3. AngularJs нг-повторить заказ структура

AngularJs нг-повторить заказ структура

2017-02-05 17 views
1

У меня есть набор данных, как этотAngularJs нг-повторить заказ структура

$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"} 
];

Я хочу напечатать это в этой манере ссылке это

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

я могу достичь этого нарезать набор данных двумя частями пакетов. Но моя проблема в том, что у меня есть некоторые операции, такие как сортировка, фильтрация по набору данных.

Так что, пожалуйста, помогите мне решить эту проблему.

источник

2017-02-05 Saikat Guin

+0

Какой результат в конце концов, что вы хотите быть распечатаны –

+0

Я хочу, чтобы напечатать имя, город и страна, как HTML структуры. Я попробовал ng-repeat в div «class = row». Но это не заполняет мое требование. Я хочу напечатать два набора данных в одной строке. Я хочу использовать только один ng-repeat. –

+0

Где находится ваш другой набор данных и вы можете показать свой результат в виде простого html, чтобы мы могли вам помочь – nivas

ответ

1

Насколько я понимаю, это то, чего вы пытаетесь достичь. Посмотрите на полную страницу. Если у вас есть несколько наборов данных, например $ scope.dataset1, $ scope.dataset2, то вы можете объединиться с помощью функции $ .merge (dataset1, dataset2) или angular.merge ({}, dataset1, dataset2), а затем применить к ней фильтры.
Редактировать:
Я изменил код в соответствии с jsfiddle. Смотрите результат на полную страницу

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>

источник

2017-02-05 06:51:47 nivas

+0

вот структура html, которую я хочу напечатать так: https://jsfiddle.net/nw9bqeho/ –

1

@nivas Я хочу, чтобы данные, как это.

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

источник

2017-02-05 07:13:32

+0

@nivas У меня есть только один набор данных. С одним набором данных я должен запустить ng-repeat таким образом, чтобы напечатать вывод, например https://jsfiddle.net/nw9bqeho/ –

+0

. У меня есть быстрый вопрос, сколько строк вы хотите напечатать так и в чем разница между ними – nivas

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

источник

2017-02-05 07:18:32 Sanaz

+0

Я хочу напечатать данные, подобные https://jsfiddle.net/nw9bqeho/. –

+0

Добавить этот код: – Sanaz

+0

Я, изменил свой ответ, вы попробовали это? @SaikatGuin – Sanaz

 Смежные вопросы

  • Нет связанных вопросов^_^