ng-repeat 内部的动态 ng-switch

Question

我正在尝试创建一个基于动态对象数组的开关...

例如：

  <div ng-switch on="currentItem">
    <div ng-repeat="item in myItems" ng-switch-when="item.name">
      <p>{{item.name}}</p>
      <button ng-click="nextItem(item)">Next Item</button>
    </div>
  </div>

然后在我的控制器中...

  $scope.myItems = [{
      "name": "one"
    }, {
      "name": "two"
    }]
    // Default first item
  $scope.currentItem = $scope.myItems[0].name;

  $scope.nextItem = function(med) {
    for (var i = 0; i < $scope.myItems.length; i++) {
      if ($scope.currentItem === $scope.myItems[i].name) {
        if ($scope.myItems[i + 1] !== undefined) {
          $scope.currentItem = $scope.myItems[i + 1].name
        }
      }
    }
  }

基本上，dom 应该为每个项目呈现一个 div，并且当用户单击“下一个项目”按钮时，应该更新 currentItem，并且应该基于此触发切换.

我没有看到我应该看到的第一个结果（没有渲染）。任何帮助将不胜感激。

笨蛋：http://plnkr.co/edit/PF9nncd1cJUNAjuAWK22?p=preview

Answer 1

我已经分叉了你的 plunkr：http://plnkr.co/edit/A9BPFAVRSHuWlmbV7HtP?p=preview

基本上你没有很好地使用 ngSwitch。

只需使用 ngIf:

<div ng-repeat="item in myItems">
  <div ng-if="currentItem == item.name">
    <p>{{item.name}}</p>
    <button ng-click="nextItem(item)">Next Item</button>
  </div>
</div>

Answer 2

我已经分叉了你的 plunkr：http://plnkr.co/edit/2doEyvdiFrV74UXqAPZu?p=preview

类似于 Ignacio Villaverde，但我更新了您获取 nextItem() 的方式。

$scope.nextItem = function() {
    var next = $scope.myItems[$scope.myItems.indexOf($scope.currentItem) + 1];
    if(next) {
      $scope.currentItem = next;
    }
  }

而且您可能应该在 currentItem 中保留对整个对象的引用，而不仅仅是名称：

<div ng-repeat="item in myItems">
<div ng-if="item == currentItem">
  <p>{{item.name}}</p>
  <button ng-click="nextItem(item)">Next Item</button>
</div>

简单多了！

ng-repeat 内部的动态 ng-switch

Dynamic ng-switch inside of ng-repeat

javascript

angularjs

ng-repeat

ng-switch