Question

我有一个复杂的对象，如下所示：

$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"
    ]
  }
}

我想显示“GENERAL_FIELDS”和“stn”中的所有字段。 Fields的值可以是字符串或字符串数组。如果它是数组，我还想在其上重复并显示内容。以下是我的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>

但ng-if="Array.isArray(value)"永远不会成立，数组字段以对象形式显示：["Journal","Article"]。我错过了什么？

Answer 1

您应该在控制器中执行，而不是直接在模板中访问Array对象上的方法。例如：

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

你的控制器：

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

我没有测试过，但逻辑应该在控制器中，而不是在模板中。

Answer 2

这是范围界定

的问题

模板的范围与控制器中的$scope相关，因此当它查找 Array 时，它会在控制器范围内查找（例如$scope.Array）。

一种选择是使用ng-if="window.Array.isArray(value)"。请参阅下面的工作示例。

另一种选择是在控制器中设置$scope.Array = Array.prototype。这样，在调用window之前无需引用Array.isArray()。

另一种选择是在控制器范围内为Array.isArray()创建别名：

$scope.isValueAnArray = Array.isArray;

然后调用该函数以确定该值是否为数组。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

或者在控制器中添加它并保持休息状态。

 $scope.isArray = angular.isArray;

html会是这样的：

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

如果对象类型是数组，如何使用ng-repeat？

3 个答案:

这是范围界定