javascript - 创建一次 Angular 元素

Question

我有一个显示元素列表的 Angular 页面。它迭代列表并将其显示在 div 中。下面是 HTML 代码:

<div ng-repeat="item in items">
    <div class="item-title-section">
        <h1>{{item.text}}</h1>
    </div>
    <div class="item-special-section" 
            ng-show="item.type == 'FooB' ||
                    item.type == 'FooC' ||
                    item.type == 'FooD'">
        <div>
            <h2>Speical</h2>
            <p>Type Section</p>
        </div>
        <div>
            <span>{{item.text}}</span>
        </div>
    </div>
</div>

item-title-section 始终显示。但我只希望 item-special-section 显示当前元素是否属于 B、C 或 D 类型。这里的问题是，如果列表包含我只想将 div 包含在内的所有 3 个元素打印一次，但打印每个元素的文本。所以在这种情况下:

{
    {
        type: FooA,
        title: FooA,
        text: "Some text for this element"
    },
    {
        type: FooB,
        title: FooB,
        text: "Some text for this element"
    },
    {
        type: FooC,
        title: FooC,
        text: "Some text for this element"
    }
}

item-special-section div 打印两次。 Angular 有没有一种方法可以静态创建一个 html 元素，这意味着 if 它被创建了，只创建一次？

Answer 1

因此，我为您的问题找到的一种解决方法是将仅显示一个特殊元素的逻辑分配给附加到 $scope 的单独函数。我创建了一个Plnkr Example帮助证明我的解释。

HTML

<div class="item-special-section"
     ng-show="showSpecialSection(item.type)">
  <p>I'm a special case!</p>
  <p>{{item.text}}</p>
</div>

在 HTML 中，只有当 showSpecialSection 返回 true 并且传入 item.type 时，我们才允许该元素显示。

JavaScript

// Define out specialItems
$scope.specialItems   = ['FooB', 'FooC', 'FooE'];

// Create an array to stash the first item that fulfills
// the requirement in showSpecialSection
$scope.allowedItem    = [];

$scope.showSpecialSection = function(item) {
  // First we check if the item is in our defined list
  // of special items
  if ($scope.specialItems.indexOf(item) != -1) {

    // Next depending on if allowedItem has anything,
    // we either add it to allowedItem or check if it is
    // already inside allowedItem
    if ($scope.allowedItem.length == 0) {
      $scope.allowedItem.push(item);
      return true;
    }
    else if ($scope.allowedItem.indexOf(item) != -1) {
      return true;
    }
  }
  // return false if all other logic checks failed
  return false;
}

请告诉我这是否适合您，如果您有疑问，请发表评论。干杯~