AngularJS：ng-switch + ng-repeat 在 switch 语句中带有按钮

Question

我对 Angular 还是很陌生，我有点被一个问题困住了。我有一个显示项目的 ng-repeat。在项目中，我有一个“显示更多信息”按钮，当您单击它时，应该会导致新视图替换当前视图（包括显示更多信息按钮）。然后，新视图将有一个“返回”按钮，该按钮将切换回原始状态。

不幸的是，我似乎无法弄清楚如何让它发挥作用。

这是我所知道的……

<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，它会阻止其他元素的视图被切换。

<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>

Answer 2

使用ng-hide 和ng-show 而不是ng-switch

<article ng-repeat="item in items" class="items">
  <div ng-show="isviewvisible">
    <div>
      <p>Default State for {{item}}</p>
      <div class="btn" ng-click="more()">More Info
    </div>
    <div ng-hide="isviewvisible">
      <p>Info for {{item}}</p>
      <div class="btn" ng-click="goBack()">Go back</div>
    </div>
  </div>
</article>

现在在 angularjs 中

$scope.isviewvisible = true;

$scope.more = function(){
  $scope.isviewvisible = false;
}

$scope.goBack = function(){
  $scope.isviewvisible = true;
}

当您点击more() 时，它将隐藏视图并显示更多信息

当您单击goBack() 时，它将隐藏更多信息并显示视图