1. 首页
  2. 问答
  3. AngularJs NG-重复定制结构

AngularJs NG-重复定制结构

2017-02-05 33 views
1

我有这样AngularJs NG-重复定制结构

$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结构。我试着重复“class = row”div。但它并没有完全满足我的要求。我想在一行中打印两个数据集。我只想使用一个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

相关问题

 相关问题