Question

我有一个json嵌套数组，如此fiddle所示，我希望将元素显示为行和列。每行应有3列。我得到了这个fiddle，但是它有简单的json数组.Here ng-if条件用于将数据分成行。

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

但在我的情况下，我想显示数组，如小提琴中显示的表结构所示。此外，如果有任何空对象，则应忽略它。怎么做？有什么想法吗？

Answer 1

就这样简单尝试

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

Answer 2

我想你想要这样的东西：

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

Answer 3

如果您使用angular.filter，这是一个非常好的解决方案 https://github.com/a8m/angular-filter

使用 chunkBy

代码看起来像

server.ssl.key-store: classpath:dev_keystore.p12
server.ssl.key-store-password: mypassword
server.ssl.keyStoreType: PKCS12
server.ssl.keyAlias: tomcat

Answer 4

我认为这符合您的需求，如果不是，请告诉我。

＆＃13;

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();
  });

＆＃13;

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

＆＃13;

Angularjs为每3列创建一行

4 个答案: