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，当用户单击Next Item按钮时，应该更新currentItem，并且交换机应该基于此触发。

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

普兰克：http://plnkr.co/edit/PF9nncd1cJUNAjuAWK22?p=preview

Answer 1

我把你的傻瓜分开了：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

我已经把你的傻瓜分开了：http://plnkr.co/edit/2doEyvdiFrV74UXqAPZu?p=preview

与Ignacio Villaverde类似，但我更新了你获得nextItem（）的方式。

html {background-color: black}

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

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

更简单！

ng-repeat内的动态ng-switch

2 个答案: