Question

首先，我有来自json的链接并使用ng-repeat显示它，我想知道它是否最佳实践加载与其链接相对应的所有对象属性（在div中）并隐藏它以便在单击时链接，相应的div显示。

我正在考虑最糟糕的情况，如果我们有大约100个链接并加载所有相应的div并隐藏它o_O

所以这是我的HTML：

<a href="">
  <div ng-model="showModal" class="contentItem" ng-repeat='meal in recipes | filter:searchText' ng-style="{'background-image':'url({{ meal.url }})'}">
                        <span id="contentItemHeader">{{ meal.title }}</span>
                        <span id="contentItemLevel">{{ meal.level }}</span>
  </div>
</a>

这是我想以全屏显示的div（模态）：

<div ng-show="showModal" ng-repeat='meal in recipes'>
<span>{{ meal.url }}</span>
<span>{{ meal.method }}</span>
<span>{{ meal.ingredients }}</span>
</div>

用例是：

-all链接

- 点击链接

- 相应的div显示

多数民众赞成！就像当你在youtube上看到一个视频列表时，你点击一个，然后视频页面打开但作为一个模态（同一页面）

非常感谢，

问候

Answer 1

您可以使用UI Bootstrap中的$modal服务，定义用餐模式的模板，并在ng-click中为每个单独的膳食附加ng-repeat处理程序。在点击句柄中，您可以打开模态并将膳食实例传递给模态的范围：

查看：

<div ng-repeat='meal in recipes' ng-click='selectMeal(meal)'>
  {{meal.title}}
</div>

Conrtoller：

  $scope.selectMeal = function(meal) {
    var dialogScope = $scope.$new(true);
    dialogScope.meal = meal;

    var modalInstannce = $modal.open({
      templateUrl: 'meal-dialog.html',
      scope: dialogScope
    });
  };

模态模板：

<div class="modal-header">
  <h3 class="modal-title">{{ meal.title }}</h3>
</div>
<div class="modal-body">
  <div>{{ meal.url }}</div>
  <div>{{ meal.method }}</div>
  <hr />
  <h4>Ingridients</h4>
  <ul >
    <li ng-repeat='ingridient in meal.ingridients' >{{ingridient.name}} : {{ingridient.amount}}</li>
  </ul>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="$close()">Close</button>
</div>

Plunker here

要显示有问题的div，当选择用餐时，在selectedMeal中引入新的$scope属性并在模态模板中使用它，从模态div中删除ng-repeat并设置selectedMeal以及showModal函数中的selectMeal：

$scope.selectMeal = function(meal) {
  $scope.selectedMeal = meal;
  $scope.showModal = true;
};

<div ng-show="showModal" >
  <span>{{ selectedMeal.url }}</span>
  <span>{{ selectedMeal.method }}</span>
  <span>{{ selectedMeal.ingredients }}</span>
</div>

Answer 2

如果您担心所有div存在但是隐藏的表现，请考虑使用ng-if而不是ng-show。如果表达式为false，ng-if不会创建dom元素。

<div ng-if="expression"> //element exists if 'expression' is true </div>

Answer 3

如果你可以提前使用angular-ui，那么我认为手风琴完全符合要求...... [这里是angular-ui是手风琴的链接]指令1

angular-ui是所有twitter bootstrap组件的纯angularjs实现。

<accordion close-others="oneAtATime">
    <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </accordion-group>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </accordion-group>
</accordian>

您可以一次打开一个或所有用户选择的链接详细信息部分...

如何使用ng-show angular js单击链接时显示div

3 个答案: