ng-repeat包含4个包含数组和变量的对象

时间:2018-02-09 10:54:35

标签: angularjs angularjs-ng-repeat

下面是我的代码,我使用ng-repeat从scope中加载我的数据。我的范围有4个数组0,1,2,3。

<div class="card"  ng-repeat="x in configuration" >
    <div class="card-content">
        <p>Relay No
            <b>{{x[0].uid}}</b>
        </p>
    </div>
    <div class="card-content">
        <p>Relay No
            <b>{{x[1].uid}}</b>
        </p>
    </div>......</div>

如何使用$ index在单个调用中加载所有四个

,使我的代码单行
<div class="card-content">
    <p>Relay No
        <b>{{x[$index+1].uid}}</b>
    </p>
</div>

配置数组

Array(4)
0:{configuration: Array(3), _id: "5a795661ca76d51804848731", uid:25,gid: 2}
1:{configuration: Array(4), _id: "5a795667ca76d51804848732", uid: 26, gid:2}
2:{configuration: Array(0), _id: "5a79566dca76d51804848733", uid: 27, gid: 2}
3:{configuration: Array(0), _id: "5a795674ca76d51804848734", uid: 28, gid: 2}
下面的

是完整的对象。我从后端得到这个。对象包含config,uid和gid。

{
    "_id" : ObjectId("5a795661ca76d51804848731"),
    "configuration" : [
        {
            "cid" : "HgvE319bbibJ",
            "_on" : "15:01",
            "_off" : "15:02"
        }
        ],
    "uid" : 25,
    "gid" : 2
}
{
    "_id" : ObjectId("5a795667ca76d51804848732"),
    "configuration" : [
        {
            "cid" : "tJ1rMNYfrjl4",
            "_on" : "15:03",
            "_off" : "15:04"
        },
        {
            "cid" : "C9aOF1jZ51H9",
            "_on" : "15:07",
            "_off" : "15:08"
        },
        {
            "cid" : "ge5ZZxcZzeGO",
            "_on" : "15:09",
            "_off" : "15:10"
        },
        {
            "cid" : "e8S0atEJ1Ans",
            "_on" : "12:57",
            "_off" : "12:58"
        }
    ],
    "uid" : 26,
    "gid" : 2
}
{
    "_id" : ObjectId("5a79566dca76d51804848733"),
    "configuration" : [ ],
    "uid" : 27,
    "gid" : 2
}
{
    "_id" : ObjectId("5a795674ca76d51804848734"),
    "configuration" : [ ],
    "uid" : 28,
    "gid" : 2
}

4 个答案:

答案 0 :(得分:0)

问题是将_id更改为整数。它不应该采用那种格式

<div class="card"  ng-repeat="x in list" >
<div class="card-content">
<p>Relay No
<b>{{x.uid}}</b>
</p>
</div>
</div>

答案 1 :(得分:0)

这应该可以正常工作。

<div class="card" ng-repeat="(key, item) in configuration">
    <div class="card-content">
        <p>Relay No
            <b>{{item.uid}}</b>
        </p>
    </div>
</div>

此处的配置与您上面粘贴的主要对象相同。它基本上是一个集合。

点击此处查看简单说明:

https://www.w3schools.com/angular/ng_ng-repeat.asp

答案 2 :(得分:0)

@ rach8garg - UID和Configuration是同一对象的变量。所以你无法从配置

获得UID

答案 3 :(得分:0)

您需要从集合中删除ObjectId,否则会出现引用错误。

以下是工作示例。

    var app = angular.module("myApp", []);
     
     app.controller("myCtrl", function($scope) {
        $scope.configuration = [{
    "configuration" : [
        {
            "cid" : "HgvE319bbibJ",
            "_on" : "15:01",
            "_off" : "15:02"
        }
        ],
    "uid" : 25,
    "gid" : 2
     },
     {
    "configuration" : [
        {
            "cid" : "tJ1rMNYfrjl4",
            "_on" : "15:03",
            "_off" : "15:04"
        },
        {
            "cid" : "C9aOF1jZ51H9",
            "_on" : "15:07",
            "_off" : "15:08"
        },
        {
            "cid" : "ge5ZZxcZzeGO",
            "_on" : "15:09",
            "_off" : "15:10"
        },
        {
            "cid" : "e8S0atEJ1Ans",
            "_on" : "12:57",
            "_off" : "12:58"
        }
       ],
          "uid" : 26,
            "gid" : 2
            },
           {
         "configuration" : [ ],
         "uid" : 27,
         "gid" : 2
           },
       {
    "configuration" : [ ],
    "uid" : 28,
    "gid" : 2
      }];
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in configuration">{{x.uid}}</h1>

<script>

</script>

</body>