仅当对象类型为数组时才如何使用ng-repeat？

Question

I have a complex object as shown below:

$scope.document = 
 {
  "GENERAL_FIELDS": {
    "Source_Type": "custom",
    "Annotations": [
      "216/content/Factiva_CM_001/Proteins",
      "216/content/Factiva_CM_001/Fact"
    ],
    "Content": [
      "   Baculovirus; Budded virus; Ultrastructure; Cryo-EM;"
    ],
    "Title": [
      "Budded baculovirus particle structure revisited"
    ]
  },
  "stn": {
    "Document_Type": [
      "Journal",
      "Article"
    ]
  }
}

I want to display all the fields present in "GENERAL_FIELDS" and "stn". Fields' value can either be string or array of strings. If it is array, I further want to ng-repeat on it and display the content. Following is my html:

<div id="titsec" class="comdocdet"  ng-repeat="(category, group) in document">
   <div ng-repeat="(key, value) in group">
      <div class="pTitle">
         {{key}}
      </div>
      <div class="contdesc">
         <div ng-if="Array.isArray(value)">
            <div ng-repeat="v in value">
               {{v}}
            </div>
         </div>
         <div ng-if="!Array.isArray(value)">
            {{value}}
         </div>
      </div>
   </div>
</div>

But ng-if="Array.isArray(value)" is never true and array fields are being displayed in object form: ["Journal","Article"] . What am I missing ?

Answer 1

Instead of accessing a method on the Array object directly in the template, you should do in your controller. So for example:

<div ng-if="vm.isValueAnArray(value)">
  // Some html
</div>

Your controller:

function isValueAnArray(val) {
  return Array.isArray(val);
}

I haven't tested it, but logic should be in the controller, not in the template.

Answer 2

Or add this in your controller and leave rest like it is.

 $scope.isArray = angular.isArray;

html would be like this :

<div ng-if="isArray(value)">
  <div ng-repeat="v in value">
    {{v}}
  </div>
</div>
<div ng-if="!isArray(value)">
            {{value}}
</div>

Answer 3

This is an issue of Scoping

The scope of the template is relative to $scope in the controller, so when it looks for Array , it will look for that in the controller scope (eg $scope.Array ).

One option is to use ng-if="window.Array.isArray(value)" . See the working example below.

Another option is to set $scope.Array = Array.prototype in the controller. That way there is no need to reference window before calling Array.isArray() .

Another option is to create an alias for Array.isArray() in the controller scope:

$scope.isValueAnArray = Array.isArray;

Then call that function to determine if the value is an array.

 angular.module('ang', []) .controller('cont', function($scope) { //use this to avoid referencing window in the template //$scope.Array = Array.prototype; $scope.document = { "GENERAL_FIELDS": { "Source_Type": "custom", "Annotations": [ "216/content/Factiva_CM_001/Proteins", "216/content/Factiva_CM_001/Fact" ], "Content": [ " Baculovirus; Budded virus; Ultrastructure; Cryo-EM;" ], "Title": [ "Budded baculovirus particle structure revisited" ] }, "stn": { "Document_Type": [ "Journal", "Article" ] } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ang" ng-controller="cont"> <div id="titsec" class="comdocdet" ng-repeat="(category, group) in document"> <div ng-repeat="(key, value) in group"> <div class="pTitle"> {{key}} </div> <div class="contdesc"> <div ng-if="window.Array.isArray(value)"> <div ng-repeat="v in value"> {{v}} </div> </div> <div ng-if="!window.Array.isArray(value)"> {{value}} </div> </div> </div> </div> </div>