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

Question

我有一个 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"
       }
    ];
});

案例：

1. 如果family.child 有一个孩子，则直接将名称分配为字符串
2. 如果family.child 有多个子级，则将名称分配为具有属性family.child.name 的字符串数组
3. 如果family.child 不在集合中，则只显示family.name

我的预期输出 UI 是

• 湿婆
  • 苏里亚
  • 卡西克
• 库马尔
  • 拉吉尼
  • 卡马尔
  • 阿吉特
• 萨默
  • Ranjan
• 马赫什
  • 巴布
• 约瑟夫

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

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

请帮助我...

Answer 1

请在此处参考fiddle。您需要对模型进行一些更改并使用新修改的模型循环 - 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>

JS：

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

Answer 2

试试这个以获得你的实际输出。

<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": []
   }
];

Answer 3

您可以将以下方法添加到您的控制器中

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

我认为应该这样做。

Answer 4

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

HTML

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

JS

app.controller('test', function ($scope) {
$scope.isArray = angular.isArray;
$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"
   }
];
  });

请注意 js 中的 $scope.isArray = angular.isArray;。查找木板 HERE

Answer 5

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

请记住，您应该至少使用 AngularJS 1.1.15 版本才能使用 ng-if。

您只需稍微整理一下您的脚本，它就会起作用：

HTML：

<body  ng-app="myApp">

<div ng-controller="ctrl">
<ul>
    <li ng-repeat="member in family">
        <h2>
        {{ member.name }}
        </h2>
        <div class="liststyling" ng-if="member.child.length > 0">
            <ul>
                <li ng-repeat="chdMember in member.child">
                    {{ chdMember.name }}
                </li>
            </ul>
        </div>
    </li>
</ul>
</div>

</body>

Javascript：

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

app.controller('ctrl', MyCtrl);
function MyCtrl($scope)  {
    $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": "Joseph"
       }
    ];
}