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

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

案例:

如果family.child有一个child那么这个名字直接分配为一个字符串
如果 family.child 有多个 child 则名称被指定为一个字符串数组，其中包含属性 family.child.name
如果 family.child 不在集合中，则只显示 family.name

我的预期输出 UI 是

西瓦
- 苏里亚
- 卡西克
库马尔
- 拉吉尼
- 卡迈勒
- 阿吉特
萨默
- 兰詹
马赫什
- 巴布
约瑟夫

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

这是您的代码的一个简单运行版本 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"
       }
    ];
}

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

请参考这里的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 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"
   }
];
  });

注意 $scope.isArray = angular.isArray; in js.Find plank HERE

Answer 5

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

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

我想这应该可以。

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

AngularJS ng-repeat for a JSON contains String or an array of a same property

arrays

json

angularjs

angularjs-ng-repeat

angular-ng-if

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

AngularJS ng-repeat for a JSON contains String or an array of a same property

arrays

json

angularjs

angularjs-ng-repeat

angular-ng-if

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