ng-lặp lại để lập chỉ mục thành mảng

Tôi có ứng dụng angularjs truyền dữ liệu qua ajax và tôi muốn ng lặp lại dữ liệu. Tôi có dữ liệu trực tuyến và hiển thị nhưng bây giờ tôi muốn templatize các đối tượng. Vấn đề tôi đang chạy vào là tôi đang sử dụng ng-lặp lại chỉ đơn giản là để chỉ mục vào một mảng trong bộ điều khiển. bây giờ tôi cần phải có mộtng-lặp lại để lập chỉ mục thành mảng

<div class="row" data-ng-repeat="row in rows"> 
     <div class="span3" data-ng-repeat="col in cols"> 
      //displays the raw json fine 
      {{ data[$parent.$index * numColumns + $index] }}       
      // also displays the raw json 
      {{ item = data[$parent.$index * numColumns + $index] }}       
      <div>Id: {{item.Id}} </div> 
      <div>Title: {{ item.ClientJobTitle }}</div> 
      ... 
     </div> 
    </div>

tôi luôn luôn có thể lặp lại các biểu hiện chỉ số mảng cho mỗi tài sản, nhưng sẽ có một vài chục tài sản, do đó, mã sẽ xấu xí và tất cả các tính toán lặp đi lặp lại sẽ làm chậm mọi thứ xuống.

Cách bên phải (góc cạnh) để thực hiện việc này là gì?

Cập nhật Tôi cũng cần phản hồi, tôi sẽ điều chỉnh số lượng cột nhanh chóng dựa trên chiều rộng cửa sổ.

Cập nhật Tôi đoán những gì tôi thực sự muốn một cái gì đó giống như không làm việc Ví dụ sau

 <div class="row" data-ng-repeat="row in rows"> 
     <div class="span3" data-ng-repeat="col in cols"> 
      <div ng-model="data[$parent.$index * numColumns + $index]"> 
       <!-- Here $model would refer to the ng-model above --> 
       <div>Id: {{$model.Id}} </div> 
       <div>Title: {{ $model.Title }}</div> 
       ... 
      </div> 
     </div> 
    </div>

Nguồn

2013-04-05 µBio

Bạn có thể cho chúng tôi biết dữ liệu ban đầu trông như thế nào không? Gặp sự cố khi hình dung cách 'mục' có liên quan đến' hàng'. Có thể đặt cùng một plunk? – jszobody

@jszobody http://plnkr.co/edit/Bd5tYa7IxMb0ALtUigrz?p=preview –

Bạn có thể tạo một chỉ thị với một transclud sẽ lấy danh sách, hàng và cột và có mục trong phạm vi cho phần transclud. Tôi biết knockout có tuyên bố đó là loại tương tự, nhưng tôi không nghĩ rằng góc –

Tôi nghĩ rằng cách để làm điều này sẽ chỉ đơn giản là vòng lặp qua các mục mình, và mương tất cả là numRows và numColumns.

http://plnkr.co/edit/Qu6X5FnZY3TpgyNjnBXy?p=preview

Đó là xuất ra chính xác những gì bạn đang làm, với nhiều mã đơn giản angularjs.

Dường như bạn đang sử dụng số lượng hàng/cột để giới hạn số lượng mục bạn hiển thị trên một hàng theo chiều ngang. Tôi nghĩ rằng bạn có thể xử lý này với css tinh khiết, bạn có thể thấy trong plunk của tôi Tôi đang hạn chế chiều rộng trên một thùng chứa cha mẹ. Tôi đang thực hiện nó theo cách thủ công, nhưng bạn có thể dễ dàng đính kèm một lớp css động vào vùng chứa cha và có quyền kiểm soát linh hoạt hơn về số lượng các mục xuất hiện trên một hàng.

Nguồn

2013-04-05 16:52:57 jszobody

Điều đó làm việc nếu tôi muốn phần cố định chiều rộng, nhưng trong trường hợp này tôi cần nó để được đáp ứng (tôi có kế hoạch điều chỉnh số cột dựa trên kích thước cửa sổ, vẫn chưa nhận được phần đó). –

CSS có thể điều chỉnh kích thước cửa sổ dễ dàng hơn.Tạo một số ít các tên lớp CSS khác nhau nếu bạn có, áp dụng chúng với ng-class = "getRowClassNams()" và di chuyển tất cả các chiều rộng logic đến đó. Nó vẫn giữ sạch vòng lặp của bạn. – jszobody

vâng, css làm cho nó dễ dàng ... nó đã được xử lý bởi bootstrap trong trường hợp của tôi (các hàng và span3 lớp trong mã). Tôi có kế hoạch điều chỉnh lớp span3 như bạn đề nghị, nhưng tôi cần lớp hàng cho hành vi đáp ứng nếu tôi hiểu bootstrap chính xác. –

Bạn đã có thể xử lý vấn đề này một cách nào đó, nhưng nó có giá trị một đề cập rằng không làm việc ví dụ của bạn là hoàn toàn có thể, thậm chí không có chỉ thị:

var app = angular.module('app',[]) 
 
app.controller('myCtrl', function($scope) { 
 
\t $scope.numColumns = 2 
 
\t $scope.rows = [1,2,3] 
 
\t $scope.cols = [1,2] 
 
\t $scope.data = [ 
 
\t \t {Id:'abc',Title:'cde'}, 
 
\t \t {Id:'qwe',Title:'rty'}, 
 
\t \t {Id:'asd',Title:'fgh'}, 
 
\t \t {Id:'foo',Title:'bar'}, 
 
\t \t {Id:'uni',Title:'corn'}, 
 
\t \t {Id:'mag',Title:'ic'}, 
 
\t ]; 
 
\t $scope.change1 = function(){ 
 
\t \t \t $scope.numColumns = 2 
 
\t \t $scope.rows = [1,2,3] 
 
\t \t $scope.cols = [1,2] 
 
\t } 
 
\t \t $scope.change2 = function(){ 
 
\t \t \t $scope.numColumns = 3 
 
\t \t $scope.rows = [1,2] 
 
\t \t $scope.cols = [1,2,3] 
 
\t } 
 
});

.span3 { 
 
\t display:inline-block; 
 
\t padding:5px; 
 
\t margin:5px; 
 
\t background: pink; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
<body ng-app="app"> 
 
\t <div ng-controller="myCtrl"> 
 
\t \t <button ng-click="change1()">2x3</button> 
 
\t \t \t \t <button ng-click="change2()">3x2</button> 
 

 
\t <div class="row" data-ng-repeat="row in rows"> 
 
     <div class="span3" data-ng-repeat="col in cols"> 
 
      <div> 
 
\t \t \t \t \t \t \t {{($model = data[$parent.$index * numColumns + $index])?'':''}} 
 

 
       <!-- Here $model would refer to the ng-model above --> 
 
       <div>Id: {{$model.Id}} </div> 
 
       <div>Title: {{ $model.Title }}</div> 
 
       ... 
 
      </div> 
 
     </div> 
 
    </div> 
 
\t </div> 
 
</body>

về cơ bản, nó có thể để tạo biến như "mô hình $" khi đang di chuyển, biểu thức bên trong:

{{($model = data[$parent.$index * numColumns + $index])?'':''}}

Nó sẽ không được in. Nếu không, nó sẽ đáp ứng, làm việc bên trong ng-lặp lại và tất cả. Tuy nhiên, nó là loại workaround, và chỉ thị có thể là một lựa chọn tốt hơn.

Nguồn

2017-05-26 21:27:57

ng-lặp lại để lập chỉ mục thành mảng

Trả lời

Các vấn đề liên quan