AngularJs ng-repeat自定义结构

时间：2017-02-05 06:02:53

标签： html angularjs angularjs-scope angularjs-ng-repeat ng-repeat

我有这样的数据集

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

我可以通过两个数据包对数据集进行切片来实现这一点。但我的问题是我有一些操作，如排序，过滤数据集。

所以请帮我解决这个问题。

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：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>

答案 2 :(得分：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>
相关问题
最新问题