0

I am trying to think angular but am not sure how to assign a value to an element on load like in jQuery.

I have the following tabs, all of which become 'selected' on click. How do I select one on load so that one tab is 'selected' without the user having to do anything?

<ul class="nav nav-tabs">
    <li ng-class="{active: selected == 1}">
     <a href="" ng-click="selected=1">Overview</a>
    </li>
    <li ng-class="{active: selected == 2}">
     <a href="" ng-click="selected=2">My Properties</a>
    </li>
    <li ng-class="{active: selected == 3}">
     <a href="" ng-click="selected=3">Potential Properties</a>
    </li>
</ul>


<div ng-if="selected == 1">
    <div ng-include=" 'views/dash/_overview.html' "></div>
</div>

<div ng-if="selected == 2">
    <div ng-include=" 'views/dash/_myproperties.html' "></div>
</div>

<div ng-if="selected == 3">
    <div ng-include=" 'views/dash/_buyproperties.html' "></div>
</div>
Joe Isaacson
  • 4,012
  • 6
  • 30
  • 40

1 Answers1

1

In your controller at the start have

$scope.selected = 1;

But you probably should put it in an object to keep the $scope clean

$scope.data = {
   selectedTab:1
};

and

<li ng-class="{active: data.selectedTab == 1}">
<div ng-if="data.selectedTab == 1">

etc

Patrick Evans
  • 41,991
  • 6
  • 74
  • 87
  • Thanks. Think I need to read up more as to why it needs to be put into an object. – Joe Isaacson Jan 28 '14 at 04:39
  • @JoeIsaacson For that take a look at [this answer](http://stackoverflow.com/a/21286131/560593) to a question about wither or not to use an object like this. – Patrick Evans Jan 28 '14 at 04:45