Question

我正在构建一个带角度的应用程序，其中有一个项目列表（使用ng-repeat），点击每个项目我可以打开一个模态以查看更详细的描述。

现在为了切换到另一个模态，我必须关闭前一个模式，转到列表，然后单击打开另一个模态。单击上一个/下一个按钮时，我想直接转到上一个/下一个模态。我举了一个我想要实现的例子。

这是html：

<div ng-app="myApp" ng-controller="myCtrl">
   <ul>
       <li ng-repeat="t in turtles">
          {{t.name}} - {{t.weapon}} 
          <a ng-click="show = !show">Show more</a>
          <div class="modal" ng-show="show">
              <div class="close" ng-click="show = !show">X</div>
              {{t.name}} likes to eat {{t.food}} with his {{t.weapon}}!
              <div class="previous">Previous</div>
              <div class="next">Next</div>
          </div>
       </li>
   </ul>
</div>

控制器：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.turtles = [
        { name: "Michellangelo", weapon: "nunchaku", food:"pizza" },
        { name: "Donatello", weapon: "bo", food:"pizza" },
        { name: "Leonardo", weapon: "katana", food:"turtle soup" },
        { name: "Rafael", weapon: "sai", food:"pizza" } 
    ];
    $scope.show=false;
});

你可以看到一个有效的Jsfiddle here

Answer 1

这是一个有效的解决方案：http://jsfiddle.net/s7gc81zz/5/

您可以为每个乌龟添加一个show属性，而不是依赖单个变量来显示或隐藏模态，并使用ngRepeat的$index变量来引用您在数组中的位置：

<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="t in turtles">
        {{t.name}} - {{t.weapon}} 
        <a ng-click="showMore(t)">Show more</a>
        <div class="modal" ng-show="t.show">
            <div class="close" ng-click="hideMore(t)">X</div>
            {{t.name}} likes to eat {{t.food}} with his {{t.weapon}}!
            <div class="previous" ng-click="showPrevious(t, $index)>Previous</div>
            <div class="next" ng-click="showNext(t, $index)">Next</div>
        </div>
    </li>
  </ul>
</div>

现在您使用范围函数来处理下一个按钮的逻辑：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.turtles = [
        { name: "Michellangelo", weapon: "nunchaku", food:"pizza" },
        { name: "Donatello", weapon: "bo", food:"pizza" },
        { name: "Leonardo", weapon: "katana", food:"turtle soup" },
        { name: "Rafael", weapon: "sai", food:"pizza" } 
    ];
    //$scope.show=false;
    $scope.showMore = function(turtle) {
        turtle.show = true;
    };
    $scope.hideMore = function(turtle) {
        turtle.show = false;
    };
    $scope.showNext = function(turtle, index) {
      if((index+1) > ($scope.turtles.length - 1)) {
        return;
      }
      else {
        turtle.show = false;
        $scope.turtles[index+1].show = true;
      }

    };
    $scope.showPrevious = function(turtle, index) {
      if((index-1) < 0) {
        return;
      }
      else {
        turtle.show = false;
        $scope.turtles[index-1].show = true;
      }
    };
});

Answer 2

如果你想在下一个和前一个按钮的模态中创建一个导航，那么你应该在显示数组的每个对象上有一个标志，而不是一个show flag。并且根据ng-repeat的当前循环对象，您可以根据$ index + 1＆amp ;;隐藏/显示下一个和上一个按钮上的相应项目。 -1分别。

这是工作小提琴代码： http://jsfiddle.net/ashwani121/4fa6a9pr/

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.turtles = [
    { name: "Michellangelo", weapon: "nunchaku", food:"pizza" },
    { name: "Donatello", weapon: "bo", food:"pizza" },
    { name: "Leonardo", weapon: "katana", food:"turtle soup" },
    { name: "Rafael", weapon: "sai", food:"pizza" } 
];
$scope.show=false;
var prevObj = null;
$scope.showModal = function(obj){
    if(prevObj && prevObj.selected)
  {
    prevObj.selected = false;
  }
    obj['selected'] = true;
  prevObj = obj;
}

$scope.navModal = function(index){
if(index > 0 && index < $scope.turtles.length)
    $scope.showModal($scope.turtles[index]);
}
});

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="t in turtles">
    {{t.name}} - {{t.weapon}} 
    <a ng-click="showModal(t)">Show more</a>
    <div class="modal" ng-show="t.selected">
        <div class="close" ng-click="show = !show">X</div>
        {{t.name}} likes to eat {{t.food}} with his {{t.weapon}}!
        <div class="previous" ng-click="navModal($index-1)">Previous</div>
        <div class="next" ng-click="navModal($index+1)">Next</div>
    </div>
</li>
</ul>
</div>

Answer 3

您可以使用索引变量来跟踪您当前必须显示的忍者龟。

顺便说一句，你正在创建不必要的模型/弹出窗口，因为你只需要一个并且你不需要每个忍者龟的模型:)所以最好只有一个模型弹出窗口。

您可以使用您将要存储的索引变量并在$ scope对象上相应地更新它来移动到下一个和上一个忍者龟。

检查下面的代码，此处更新了jsfiddle

XMLHttpRequest cannot load http://localhost:1773/Claims/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:54540' is therefore not allowed access. The response had HTTP status code 500.

Answer 4

因为你可能已经注意到ng-show只是添加/删除一个css类。因此，基于此，您应该为您的DIV提供ID，也许使用ng-repeat指令中的内部var $ index，例如id =“card - {{$ index}}”。确定了你的DIV并提供了一些jquery帮助（它也可以用普通的js完成）你可以识别活动卡，检查它的ID，计算下一个或以前的ID值，并添加或删除你需要的任何特定的css类

或者你可以寻找一个有角度的旋转木马;）

AngularJS - 转到上一个/下一个模态

4 个答案: