CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatng-switch
Ian Gray
Ian Gray

Reputation: 387

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

I'm pretty new to angular and I'm kind of stuck with an issue. I have an ng-repeat that shows items. In the items I have a "show more info" button, which when you click it should cause the a new view to replace the current one (including the show more info button). The new view would then have a "go back" button which will switch back to the original state.

Unfortunately I can't seem to figure out how to get this to work.

This is as far as I've gotten...

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

If someone could help me out here I would appreciate it. Thank you.

Upvotes: 0

Views: 2070

Answers (2)

Satpal
Satpal

Reputation: 133403

You can set the value of view when button is clicked. I would advise you to use item.view instead of view, it will prevent view of other elements to be toggled.

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

Here is an working example.

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

Upvotes: 3

maddygoround
maddygoround

Reputation: 2280

use ng-hide and ng-show instead of 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>

now in angularjs

$scope.isviewvisible = true;

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

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

when you clicked the more() it will hide the view and will show the moreinfo

when you click the goBack() it will hide the moreifo and will show the view

Upvotes: 1

Related Questions