Freya Freya - 1 year ago 65
AngularJS Question

Initialize ng-click value as true in angularjs

I am working with a spa in angular, where I use ng-click to switch between pages (by showing and hiding divs). All works well, this is the simplified version of the code I am using:

<a href="" ng-click="first=true; second=false; third=false">First</a>
<a href="" ng-click="first=false; second=true; third=false">Second</a>
<a href="" ng-click="first=false; second=false; third=true">Third</a>

<div class="container" id='settings' ng-show='first'> First </div>
<div class="container" id='settings' ng-show='second'> Second </div>
<div class="container" id='settings' ng-show='third'> Third </div>

However, initially none of the divs is displayed - since none of the links is clicked. I would like the first page to show initially, and then hide if another link is clicked. How could I do that?

Answer Source

I'd like to propose little different solution combination of ng-repeat & ng-switch directive which suits perfectly for your case


$scope.items = [
   {id: 1, name: 'First'},
   {id: 2, name: 'Second'},
   {id: 3, name: 'Third'},

$scope.model = { selected: 1};


<body ng-controller="MainCtrl">
  <a href="" ng-click="model.selected =" ng-repeat="item in items">

  <div class="container" id='settings' ng-switch='model.selected'>
    <div ng-switch-when="1"> First </div>
    <div ng-switch-when="2"> Second </div>
    <div ng-switch-when="3"> Third </div>

Demo Plunkr

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download