1. 首頁
  2. 問答
  3. AngularJs NG-重複定製結構

AngularJs NG-重複定製結構

2017-02-05 21 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

相關問題

 相關問題