Making a specific view the initial view on page load (AngularJS)

Question

This will be very easy for you Angular monsters out there. I have two views ( a list view and a grid view) each in a partial html that is injected via ng-include on a click of a button. Like this:

<div class = "bar">
    <h1>Contacts</h1>
    <a href="#" class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>
    <a href="#" class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>
</div>
<div ng-show="layout == 'list'" class="list">
    //ng-include for the list page is here
</div>
<div ng-show="layout == 'grid'" class="grid">
    //ng-include for the grid page is here
</div>

How can I initiate one of those views? grid for instance. I imagine it's done with ng-init. but I can't figure it out

Thanks!

Iulian · Accepted Answer · 2017-01-27 21:23:39Z

1

You can initialize an variable either using ng-init or in controller variable declaration:

ng-init="layout === 'list'"
$scope.layout = 'list'

edited Jan 27, 2017 at 21:23

answered Jan 27, 2017 at 21:14

Iulian

1,16611 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LOTUSMS Over a year ago

Just minutes later I realized I could do this also. ng-init="layout = 'grid'" . But I like your controller-way better. I'm using yours. Thanks! I knew this would be easy.

LOTUSMS Over a year ago

Actually, for future visitors, you should add the ng-init way to your answer. Option1 and Option2 is a much more completed answer

Collectives™ on Stack Overflow

Making a specific view the initial view on page load (AngularJS)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related