Question

所以我有一个JSON数组对象，我正在进行AngularJS ng-repeat，下面的代码在品种和/或选项有多个对象时有效，但是当它们只有一个对象时，实际上在做当这些对象只有一个对象时，pet.breeds.breed [0]或pet.options.option [0]不返回任何内容

        "pet": {
            "options": {
                "option": [{
                    "$t": "hasShots"
                }]
            },
            "status": {
                "$t": "A"
            },
            "contact": {
                "phone": {},
                "state": {
                    "$t": "NC"
                },
                "address2": {},
                "email": {
                    "$t": "deborah@rainingpets.com"
                },
                "city": {
                    "$t": "Charlotte"
                },
                "zip": {
                    "$t": "28210"
                },
                "fax": {},
                "address1": {}
            },
            "age": {
                "$t": "Adult"
            },
            "size": {
                "$t": "L"
            },
            "id": {
                "$t": "37778045"
            },
            "shelterPetId": {},
            "breeds": {
                "breed": {
                    "$t": "German Shepherd Dog"
                }
            },
            "name": {
                "$t": "Axel"
            },
            "sex": {
                "$t": "M"
            },
            "description": {
                "$t": "Axel is a handsome 4-year-old German Shepherd who is looking for a home. He is a large boy weighing 95 pounds but should be closer to 80. He has the GSD prey drive and would do best with someone who is experienced with the breed. Axel is a typical Shepherd; loving, loyal and good with children. He is also playful and does need a fenced yard to play in.\n\nAxel is vaccinated, neutered and micro-chipped."
            },
            "mix": {
                "$t": "no"
            },
            "shelterId": {
                "$t": "NC880"
            },
            "lastUpdate": {
                "$t": "2017-04-08T19:31:08Z"
            },
            "animal": {
                "$t": "Dog"
            }
        }

 <div class="ui label" ng-repeat="(k, breed) in pet.breeds.breed">{{breed.$t}}</div>

Answer 1

您可以使用angular.isArray进行检查。

var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
  $scope.data = { 
        "pet": {
            "breeds": {
                "breed": { "$t": "Siamese" }
             }   
          }
       }
       
       $scope.isArray = angular.isArray($scope.data.pet.breeds.breed);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="anApp" ng-controller="ctrl">
  <div class="form-group">
 <div class="ui label" ng-if="isArray" ng-repeat="(k, breed) in data.pet.breeds.breed">{{breed.$t}}</div>
 
 <div class="ui label" ng-if="!isArray" ng-repeat="(k, breed) in data.pet.breeds">{{breed.$t}}</div>
  </div>
</div>

Answer 2

假设如果存在多个breeds.breed的结构是数组并且只是一个对象，那么在传递给视图之前，最好将数据映射到一致的数组结构

类似的东西：

$http.get('path/to/api').then(function(res){
  var pet = res.data.pet;
  if(angular.isArray(pet.breeds.breed) ){
     // already an array
     $scope.breeds = pet.breeds.breed;
   }else{
     // put object in new array
     $scope.breeds = [pet.breeds.breed];
   }
})

然后在视图中：

<div class="ui label" ng-repeat="breed in breeds">{{breed.$t}}</div>

或者，如果您需要将所有内容保存在同一个pet对象中而不创建新的范围属性，则只需使用条件将相应的属性更改为数组（如果它尚未

）

 if(pet.breeds.breed && !angular.isArray(pet.breeds.breed) ){
     pet.breeds.breed  = [pet.breeds.breed];       
 }

Answer 3

由于您在ng-repeat键名称中循环对象，因此不支持使用$之类的符号。您需要从属性中删除$标记

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.obj = { "pet": {
            "options": {
                "option": [{
                    "$t": "hasShots"
                }]
            },
            "status": {
                "$t": "A"
            },
            "contact": {
                "phone": {},
                "state": {
                    "$t": "NC"
                },
                "address2": {},
                "email": {
                    "$t": "deborah@rainingpets.com"
                },
                "city": {
                    "$t": "Charlotte"
                },
                "zip": {
                    "$t": "28210"
                },
                "fax": {},
                "address1": {}
            },
            "age": {
                "$t": "Adult"
            },
            "size": {
                "$t": "L"
            },
            "id": {
                "$t": "37778045"
            },
            "shelterPetId": {},
            "breeds": {
                "breed": {
                    "t": "German Shepherd Dog"
                }
            },
            "name": {
                "$t": "Axel"
            },
            "sex": {
                "$t": "M"
            },
            "description": {
                "$t": "Axel is a handsome 4-year-old German Shepherd who is looking for a home. He is a large boy weighing 95 pounds but should be closer to 80. He has the GSD prey drive and would do best with someone who is experienced with the breed. Axel is a typical Shepherd; loving, loyal and good with children. He is also playful and does need a fenced yard to play in.\n\nAxel is vaccinated, neutered and micro-chipped."
            },
            "mix": {
                "$t": "no"
            },
            "shelterId": {
                "$t": "NC880"
            },
            "lastUpdate": {
                "$t": "2017-04-08T19:31:08Z"
            },
            "animal": {
                "$t": "Dog"
            }
        }
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div class="ui label" ng-repeat="(k, breed) in obj.pet.breeds.breed">key- {{k}} <br> value-  {{breed}}</div>
 
</div>

Answer 4

只需在控制器范围内添加以下行，即JS文件

$scope.isArray = angular.isArray;

在您的视图文件中添加以下检查

<div ng-if="isArray($scope.pet.breeds)>
    -- Code for ng-repeat
</div>

 <div ng-if="!isArray($scope.pet.breeds)>
    -- Code for direct data read $scope.pet.breeds.breet.$t
</div>

我跳起来有帮助。

ng-repeat对一个项目不起作用

4 个答案: