AngularJS: ng-switch + ng-repeat with button inside of switch 语句

Question

我是 angular 的新手，我遇到了一个问题。我有一个显示项目的 ng-repeat。在项目中我有一个 "show more info" 按钮，当您单击它时应该会导致新视图替换当前视图（包括显示更多信息按钮）。新视图将有一个 "go back" 按钮，该按钮将切换回原始状态。

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

这是我所了解的...

<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

使用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() 时，它将隐藏更多信息并显示视图

Answer 2

您可以设置点击按钮时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>

AngularJS: ng-switch + ng-repeat with button inside of switch 语句

AngularJS: ng-switch + ng-repeat with button inside of switch statement

javascript

angularjs

angularjs-ng-repeat

ng-repeat

ng-switch