javascript - AngularJS:ng-switch + ng-repeat，在 switch 语句内带有按钮

Question

我对 Angular 还很陌生，并且遇到了一个问题。我有一个显示项目的 ng-repeat。在项目中，我有一个“显示更多信息”按钮，当您单击它时，应该会导致新 View 替换当前 View (包括显示更多信息按钮)。新 View 将有一个“返回”按钮，该按钮将切换回原始状态。

不幸的是，我似乎不知道如何让它发挥作用。

据我所知...

<article ng-repeat="item in items" class="items">
  <div ng-switch on="view">
    <div ng-switch-default>
      <p>Default State for {{item}}</p>
      <div class="btn">More Info
    </div>
    <div ng-switch-when="info">
      <p>Info for {{item}}</p>
      <div class="btn">Go back</div>
    </div>
  </div>
</article>

如果有人可以帮助我，我将不胜感激。谢谢。

Answer 1

您可以设置单击按钮时view的值。我建议您使用 item.view 而不是 view，它会阻止切换其他元素的 View 。

<article ng-repeat="item in items" class="items">
    <div ng-init="viewDefaultValue = item.view;" ng-switch on="item.view">
        <div ng-switch-default>
            <p>Default State for {{item}}</p>
            <div class="btn" ng-click="item.view = 'info';">More Info</div>
        </div>
        <div ng-switch-when="info">
            <p>Info for {{item}}</p>
            <div class="btn" ng-click="item.view = viewDefaultValue;">Go back</div>
        </div>
    </div>
</article>

这是一个工作示例。

(function() {
  angular
    .module('myApp', [])
    .controller('myController', function($scope) {
      $scope.items = [{
        view: '',
        text: 'item1'
      }, {
        view: '',
        text: 'item2'

      }]
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">

  <div ng-repeat="item in items" class="items">
    <div ng-init="viewDefaultValue = item.view;" ng-switch on="item.view">
      <div ng-switch-default>
        <p>Default State for {{item.text}}</p>
        <div class="btn" ng-click="item.view = 'info';">More Info
        </div>
      </div>
      <div ng-switch-when="info">
        <p>Info for {{item.text}}</p>
        <div class="btn" ng-click="item.view = viewDefaultValue;">Go back</div>
      </div>
    </div>
  </div>