Arrays JSON的AngularJS ng repeat包含相同属性的字符串或数组

我有一个JSON数据，即

$scope.family

，它包含family.name和可选的

family.child

app.controller('test', function ($scope) {
    $scope.family = [
       {
           "name": "Siva",
           "child": [
              {
                  "name": "Suriya"
              },
              {
                  "name": "Karthick"
              }
           ]
       },
       {
           "name": "Kumar",
           "child": [
              {
                  "name": "Rajini"
              },
              {
                  "name": "Kamal"
              },
              {
                  "name": "Ajith"
              }
           ]
       },
       {
           "name": "Samer",
           "child": "Ranjan"
       },
       {
           "name": "Mahesh",
           "child": "Babu"
       },
       {
           "name": "Joseph"
       }
    ];
});

案例：

如果

family.child

有一个子项，则直接将名称指定为字符串

如果

family.child

有多个子项，则该名称被指定为具有属性

family.child.name

如果

family.child

不在集合中，只显示

family.name

我期望的输出UI是

• 湿婆
  • 苏里亚
  • 卡迪希
• 库马尔
  • 拉吉尼
  • 卡马尔
  • 阿吉思
• 萨梅尔
  • 兰扬
• 马赫什
  • 巴布
• 约瑟夫

我的HTML源代码（我无法从该代码中获得预期的输出）

{{member.name}

以下是您的代码的简单运行版本（不是最佳编码实践）

请记住，如果要使用ng，至少应使用AngularJS1.1.15版本

您只需稍微整理一下脚本即可：

HTML:

以下是您的代码的简单运行版本（不是最佳编码实践）

请记住，如果要使用ng，至少应使用AngularJS1.1.15版本

您只需稍微整理一下脚本即可：

HTML:

为您的实际输出试试这个

<ul>
    <li ng-repeat="member in family">
        {{ member.name }}
      <div class="liststyling">
         <ul>
            <li ng-repeat="chdMember in member.child">
               {{ chdMember.name }}
            </li>
         </ul>
      </div>
   </li>
</ul>

$scope.family = [
{
       "name": "Siva",
       "child":
       [
          {
              "name": "Suriya"
          },
          {
              "name": "Karthick"
          }
       ]
},
{
       "name": "Kumar",
       "child": [
          {
              "name": "Rajini"
          },
          {
              "name": "Kamal"
          },
          {
              "name": "Ajith"
          }
       ]
   },
   {
       "name": "Samer",
       "child": [{name:"Ranjan"}]
   },
   {
       "name": "Mahesh",
       "child": [{name:"Babu"}]
   },
   {
       "name": "Joseph",
       "child": []
   }
];



{{member.name}


{{chdMember.name}




$scope.family=[
{
“名称”：“湿婆”，
“儿童”：
[
{
“名称”：“Suriya”
},
{
“名称”：“Karthick”
}
]
},
{
“名称”：“库马尔”，
“儿童”：[
{
“姓名”：“拉吉尼”
},
{
“名称”：“卡马尔”
},
{
“名称”：“Ajith”
}
]
},
{
“姓名”：“Samer”，
“儿童”：[{姓名：“Ranjan”}]
},
{
“姓名”：“Mahesh”，
“儿童”：[{姓名：“巴布”}]
},
{
“姓名”：“约瑟夫”，
“儿童”：[]
}
];
为您的实际输出尝试此方法

<ul>
    <li ng-repeat="member in family">
        {{ member.name }}
      <div class="liststyling">
         <ul>
            <li ng-repeat="chdMember in member.child">
               {{ chdMember.name }}
            </li>
         </ul>
      </div>
   </li>
</ul>

$scope.family = [
{
       "name": "Siva",
       "child":
       [
          {
              "name": "Suriya"
          },
          {
              "name": "Karthick"
          }
       ]
},
{
       "name": "Kumar",
       "child": [
          {
              "name": "Rajini"
          },
          {
              "name": "Kamal"
          },
          {
              "name": "Ajith"
          }
       ]
   },
   {
       "name": "Samer",
       "child": [{name:"Ranjan"}]
   },
   {
       "name": "Mahesh",
       "child": [{name:"Babu"}]
   },
   {
       "name": "Joseph",
       "child": []
   }
];



{{member.name}


{{chdMember.name}




$scope.family=[
{
“名称”：“湿婆”，
“儿童”：
[
{
“名称”：“Suriya”
},
{
“名称”：“Karthick”
}
]
},
{
“名称”：“库马尔”，
“儿童”：[
{
“姓名”：“拉吉尼”
},
{
“名称”：“卡马尔”
},
{
“名称”：“Ajith”
}
]
},
{
“姓名”：“Samer”，
“儿童”：[{姓名：“Ranjan”}]
},
{
“姓名”：“Mahesh”，
“儿童”：[{姓名：“巴布”}]
},
{
“姓名”：“约瑟夫”，
“儿童”：[]
}
];
请参阅此处的。您需要在模型中进行一些更改，并使用新修改的模型循环-
newFamily
，而不是
family

HTML:

<div ng-app="app" ng-controller="test">
    <ul>
        <li ng-repeat="member in newFamily">
            {{ member.name }}
            <div class="liststyling" ng-if="member.child.length > 0">
                <ul>
                    <li ng-repeat="chdMember in member.child track by $index">
                        {{ chdMember.name }}
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

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

app.controller('test', function ($scope) {
    $scope.family = [
       {
           "name": "Siva",
           "child": [
              {
                  "name": "Suriya"
              },
              {
                  "name": "Karthick"
              }
           ]
       },
       {
           "name": "Kumar",
           "child": [
              {
                  "name": "Rajini"
              },
              {
                  "name": "Kamal"
              },
              {
                  "name": "Ajith"
              }
           ]
       },
       {
           "name": "Samer",
           "child": "Ranjan"
       },
       {
           "name": "Mahesh",
           "child": "Babu"
       },
       {
           "name": "Joseph"
       }
    ];
    $scope.newFamily = [];
    angular.forEach($scope.family, function (v, k) {
        var existingChildArray = v.child;
        var newChildArray = [];
        if (!angular.isArray(v.child) && v.child) {
            newChildArray.push({ 'name': v.child });
        }
        var addChild = newChildArray.length > 0 ? newChildArray : existingChildArray;
        $scope.newFamily.push({ 'name': v.name, 'child': addChild });
    });
});

请参阅此处的。您需要在模型中进行一些更改，并使用新修改的模型循环-
newFamily
，而不是
family

HTML:

<div ng-app="app" ng-controller="test">
    <ul>
        <li ng-repeat="member in newFamily">
            {{ member.name }}
            <div class="liststyling" ng-if="member.child.length > 0">
                <ul>
                    <li ng-repeat="chdMember in member.child track by $index">
                        {{ chdMember.name }}
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

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

app.controller('test', function ($scope) {
    $scope.family = [
       {
           "name": "Siva",
           "child": [
              {
                  "name": "Suriya"
              },
              {
                  "name": "Karthick"
              }
           ]
       },
       {
           "name": "Kumar",
           "child": [
              {
                  "name": "Rajini"
              },
              {
                  "name": "Kamal"
              },
              {
                  "name": "Ajith"
              }
           ]
       },
       {
           "name": "Samer",
           "child": "Ranjan"
       },
       {
           "name": "Mahesh",
           "child": "Babu"
       },
       {
           "name": "Joseph"
       }
    ];
    $scope.newFamily = [];
    angular.forEach($scope.family, function (v, k) {
        var existingChildArray = v.child;
        var newChildArray = [];
        if (!angular.isArray(v.child) && v.child) {
            newChildArray.push({ 'name': v.child });
        }
        var addChild = newChildArray.length > 0 ? newChildArray : existingChildArray;
        $scope.newFamily.push({ 'name': v.name, 'child': addChild });
    });
});

尽管@MarcNuri提供了一个很好的答案。但是，如果不更改数据模式，也可以使用它

HTML

请注意，
$scope.isArray=angular.isArray在js.Find plank
中，尽管@MarcNuri提供了一个很好的答案。但是，如果不更改数据模式，也可以使用它

HTML

请注意，
$scope.isArray=angular.isArray
在js.Find plank
中，您可以向控制器添加以下方法

$scope.isArray = function(obj) {
  return angular.isArray(obj);
}

并将标记更新为

<li ng-repeat="member in family">
    {{ member.name }}
    <div class="liststyling">
    <ul ng-if="isArray(member.child)">
      <li ng-repeat="chdMember in member.child">
          {{ chdMember.name }}
      </li>
    </ul>
    <ul ng-if="member.child && !isArray(member.child)">
      <li>
        {{ member.child }}
      </li>
    </ul>
    </div>
</li>


{{member.name}


{{chdMember.name}




{{member.child}




我认为这应该可以。您可以将以下方法添加到控制器中

$scope.isArray = function(obj) {
  return angular.isArray(obj);
}

并将标记更新为

<li ng-repeat="member in family">
    {{ member.name }}
    <div class="liststyling">
    <ul ng-if="isArray(member.child)">
      <li ng-repeat="chdMember in member.child">
          {{ chdMember.name }}
      </li>
    </ul>
    <ul ng-if="member.child && !isArray(member.child)">
      <li>
        {{ member.child }}
      </li>
    </ul>
    </div>
</li>


{{member.name}


{{chdMember.name}




{{member.child}




我想这应该可以