Angularjs создает строку для каждых 3 столбцов

У меня есть вложенный массив json, как показано в этом fiddle, и я хочу отображать элементы в виде строк и столбцов. Каждая строка должна иметь 3 столбца. Я получил это fiddle, где это сделано, но у него есть простой json-массив. Здесь ng-if используется для разбиения данных на строки.Angularjs создает строку для каждых 3 столбцов

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row"> 
    <div class="col-xs-4">{{products[$index]}}</div> 
    <div class="col-xs-4">{{products[$index + 1]}}</div> 
    <div class="col-xs-4">{{products[$index + 2]}}</div> 
</div>

Но в моем случае я хочу отобразить массив, как показано в структуре таблицы, показанной на скрипке. Также, если есть нулевые объекты, его следует игнорировать. Как это можно сделать? Есть идеи?

источник

2015-10-30 Navaneet

Не следует ли это решить с помощью CSS? –

@ DeblatonJean-Philippe Я пробовал использовать ту же логику, о которой упоминалось в этой скрипке, но как мне получить данные для отображения из вложенного массива? – Navaneet

Хорошая проблема. Аналогично этому. Но эта проблема должна иметь лучшее и легкое решение. http://stackoverflow.com/questions/27037772/show-only-open-div-with-angular-if –

Я думаю, что вы хотите что-то вроде этого:

<div ng-controller="MyCtrl"> 
    <div> I want to display in below table structure</div><br/> 
    <div ng-repeat="item in items"> 
     <div class="row" ng-if="{$index%3==0}"> 
      <div ng-repeat="x in item" class="col-xs-4">{{x.IDTYPE}}</div> 
     </div> 
    </div> 
</div> 

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.items = [{ 
    "b": { 
     "PRIMKEY": 96598.0, 
     "IDTYPE": "userlogin", 
     "USERID": "yes" 
    }, 
    "c": { 
     "PRIMKEY": 106974.0, 
     "IDTYPE": "user_access", 
     "USERID": "no" 
    }, 
    "d": { 
     "PRIMKEY": 107009.0, 
     "IDTYPE": "Tel_ty", 
     "USERID": "no" 
    }, 
    "e": { 
     "PRIMKEY": 60130.0, 
     "IDTYPE": "new_user", 
     "USERID": "no" 
    }, 
    "f": { 
     "PRIMKEY": 90885.0, 
     "IDTYPE": "gen_id", 
     "USERID": "001_0_2361" 
    }, 
    "g": null, 
    "h": { 
     "PRIMKEY": 106996.0, 
     "IDTYPE": "uyy_id", 
     "USERID": "753" 
    }, 
    "i": { 
     "PRIMKEY": 106993.0, 
     "IDTYPE": "qwe_id", 
     "USERID": "585" 
    }, 
    "j": { 
     "PRIMKEY": 104831.0, 
     "IDTYPE": "phone_login", 
     "USERID": "122324" 
    }, 
    "k": { 
     "PRIMKEY": 85476.0, 
     "IDTYPE": "windows_id", 
     "USERID": "qwertr" 
    } 
}]; 
}

Вы можете проверить это fiddle.

источник

2015-10-30 08:56:21

No. У меня не было проблемы. Я хочу отображать только IDTYPE. Я показал рисунок в скрипке. см. это http://jsfiddle.net/Vwsej/634/ – Navaneet

Обновлен мой ответ, проверьте его сейчас. –

Просто просто попробовать, как этот

Working Demo

<div ng-controller="MyCtrl"> 
    <div ng-repeat="products in items"> 
     <div ng-repeat="product in products"> 
      <div class="col-xs-4" >{{product.IDTYPE}}</div> 
     </div> 
    </div> 
</div>

источник

2015-10-30 08:58:18

№. У меня не было проблемы. Я хочу отображать только IDTYPE. Я показал рисунок в скрипке. см. это http://jsfiddle.net/Vwsej/634/ – Navaneet

@Navaneeth Я обновил свой ответ –

@Navaneeth Это вы хотите –

Я думаю, что это будет соответствовать вашим потребностям, дайте мне знать, если это не так.

var app = angular.module('App', []); 
 
app.controller('Ctrl', function($scope) { 
 

 
    var items = [{ 
 
     "b": { 
 
     "PRIMKEY": 96598.0, 
 
     "IDTYPE": "userlogin", 
 
     "USERID": "yes" 
 
     }, 
 
     "c": { 
 
     "PRIMKEY": 106974.0, 
 
     "IDTYPE": "user_access", 
 
     "USERID": "no" 
 
     }, 
 
     "d": { 
 
     "PRIMKEY": 107009.0, 
 
     "IDTYPE": "Tel_ty", 
 
     "USERID": "no" 
 
     }, 
 
     "e": { 
 
     "PRIMKEY": 60130.0, 
 
     "IDTYPE": "new_user", 
 
     "USERID": "no" 
 
     }, 
 
     "f": { 
 
     "PRIMKEY": 90885.0, 
 
     "IDTYPE": "gen_id", 
 
     "USERID": "001_0_2361" 
 
     }, 
 
     "g": null, 
 
     "h": { 
 
     "PRIMKEY": 106996.0, 
 
     "IDTYPE": "uyy_id", 
 
     "USERID": "753" 
 
     }, 
 
     "i": { 
 
     "PRIMKEY": 106993.0, 
 
     "IDTYPE": "qwe_id", 
 
     "USERID": "585" 
 
     }, 
 
     "j": { 
 
     "PRIMKEY": 104831.0, 
 
     "IDTYPE": "phone_login", 
 
     "USERID": "122324" 
 
     }, 
 
     "k": { 
 
     "PRIMKEY": 85476.0, 
 
     "IDTYPE": "windows_id", 
 
     "USERID": "qwertr" 
 
     } 
 
    }]; 
 
    $scope.items = []; 
 
    function format() { 
 
     for (var item in items[0]) { 
 
     var i = items[0][item] 
 
     if (i) $scope.items.push(i.IDTYPE); 
 
     } 
 
    } 
 
    format(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<div ng-app="App" ng-controller="Ctrl" class="container"> 
 
    <div ng-repeat="item in items" ng-if="$index % 3 == 0" class="row"> 
 
     <div class="col-xs-4">{{items[$index]}}</div> 
 
     <div class="col-xs-4">{{items[$index + 1]}}</div> 
 
     <div class="col-xs-4">{{items[$index + 2]}}</div> 
 
    </div> 
 
</div>

источник

2015-10-30 09:11:32 IggY

Вот очень хорошее решение, если вы используете angular.filter https://github.com/a8m/angular-filter

Используйте chunkBy

код будет выглядеть

<div ng-repeat="productRow in products| chunkBy: 3"> 
    <div class="row" ng-repeat="product in productRow"> 
     <div class="col-xs-4">{{product}}</div> 
    </div> 
</div>

источник

2015-10-30 09:38:51

Angularjs создает строку для каждых 3 столбцов

ответ

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