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

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>

用例是:

-加载所有链接

-单击链接

-对应的div显示

就是这样!就像当您在 YouTube 上看到视频列表时，单击其中一个，然后视频页面会打开，但作为模式(同一页面)

非常感谢

问候

Answer 1

您可以使用$modal来自 UI Bootstrap 的服务，定义膳食模式的模板并附加 ng-click ng-repeat中每顿饭的处理程序。在点击句柄中，您可以打开模式并将膳食实例传递到模式的范围:

查看:

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

Controller :

  $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属性(property) $scope并在模态模板中使用它，删除 ng-repeat来自模态 div 并设置 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>