AngularJS - on ng-click display another div

Question

I am new to AngularJS. What I have done till now is, I have one controller and it's displaying some data. What I would like to do it, on-click on that data, display different div. What is the best way to do this ? Would like to follow MVC pattern. Also want to pass some data to another div.

Thanks

<body>
<div ng-controller="Aircraft">
    <div>
        Search: <input ng-model="search.AC">
        <table style="width:500px">
            <tbody style="background-color:#4db4fa; ">
                <tr>
                    <th scope="col">AC</th>
                    <th scope="col">Fleet</th>
                    <th scope="col">FltNum</th>
                    <th scope="col">StnFrom</th>
                    <th scope="col">StnTo</th>
                    <th scope="col">Status</th>
                </tr>
                <tr ng-repeat="Aircrafts in FlightAndAircraft | filter:search" align="center">
                    <td><button ng-click=" **** ***** HIDE THIS DIV AND DISPLAY NEXT DIV AND PASS {{Aircrafts.AC}} ***** *****" >{{Aircrafts.AC}} </button></td>
                    <td> {{Aircrafts.Fleet}}    </td>
                    <td> {{Aircrafts.FltNum}}   </td>
                    <td> {{Aircrafts.StnFrom}}  </td>
                    <td> {{Aircrafts.StnTo}}    </td>
                    <td> {{Aircrafts.Status}}   </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table style="width:500px">
            <tbody style="background-color:#4db4fa; ">
                <tr>
                    <th scope="col">AC</th>
                    <th scope="col">Fleet</th>

                </tr>
                <tr ng-repeat="Aircrafts in FlightAndAircraft | filter:search" align="center" ng-click="go(Aircrafts)">
                    <td> {{Aircrafts.AC}}       </td>
                    <td> {{Aircrafts.Fleet}}    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

j.wittwer · Accepted Answer · 2014-04-07 18:28:43Z

When the first div is clicked, you can set a variable indicating whether or not the next div should be visible. Then, use ng-if to render, or ng-hide/ng-show to make the next div visible.

<ul>
  <li ng-repeat="p in people" class="badge" >
    <div ng-click="p.visible = !p.visible">{{p.id}}</div>
    <div ng-if="p.visible" class="badge alert-success">{{p.name}}</div>
  </li>
</ul>

Here is a sample model.

$scope.people = [{name: 'igor', id: 0}, {name: 'misko', id: 1}];

Here is a demo: http://plnkr.co/yJ0CuSsm25N4VAI1hBDZ

Update

You can do something like this to show the next row of your aircraft table:

<tr ng-repeat="Aircrafts in FlightAndAircraft" align="center" ng-show="visible.index == $index">
    <td> 
      <input type="button" ng-click="visible.index = $index + 1" value={{Aircrafts.AC}} /> 
    </td>
    <td> {{Aircrafts.Fleet}}    </td>
    <td> {{Aircrafts.FltNum}}   </td>
    <td> {{Aircrafts.StnFrom}}  </td>
    <td> {{Aircrafts.StnTo}}    </td>
    <td> {{Aircrafts.Status}}   </td>
</tr>

New demo: http://plnkr.co/raF3CTlaErgoVHQhRJA1

Alexandre TRINDADE · Accepted Answer · 2014-04-07 15:33:22Z

1

You can set a variable to know that the user has clicked on data. Supposing that your data are numbers:

controller:

$scope.numbers = [1,2,3,25,78,96];
$scope.clicked = false;

html:

<button ng-click="clicked=true">Click</button>

<div ng-show="clicked">
  <span ng-repeat="number in numbers">{{ number }}</span>
</div>

answered Apr 7, 2014 at 15:33

Alexandre TRINDADE

95710 silver badges22 bronze badges

2 Comments

user533844 Over a year ago

I can not set numbers because there are 1000 numbers and can get changed.

Alexandre TRINDADE Over a year ago

It was just a hard coded example. I just mean that to show another div, you can use ng-show with a condition, for example a variable inside your scope.

defau1t · Accepted Answer · 2014-04-07 15:57:12Z

0

Something like this should do:

<div ng-controller="showAppCtrl">
  <button ng-click="showDiv = ! showDiv">Toggle</button>
  <h1>{{val}}</h1>
  <div id="upper" ng-show="showDiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fuga voluptatem vero eos itaque nihil dolores quis eveniet repudiandae esse earum assumenda cumque laborum est porro quaerat quia accusamus amet.</div>
</div>

var App = angular.module("App", [])
          .controller('showAppCtrl', function($scope) {
            $scope.val = "Something to be shown";


          });

BIN DEMO

answered Apr 7, 2014 at 15:57

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

AngularJS - on ng-click display another div

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related