Initialize ng-click value as true in angularjs

Question

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?

@PankajParkar – I have mentioned that in my comment as well :) — Rayon
– Rayon, Commented Jul 10, 2016 at 17:46
@Rayon Sorry I completely missed that.. I refreshed comment later.. — Pankaj Parkar
– Pankaj Parkar, Commented Jul 10, 2016 at 17:47

Pankaj Parkar · Accepted Answer · 2016-07-10 18:03:05Z

1

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

Code

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

$scope.model = { selected: 1};

HTML

<body ng-controller="MainCtrl">
  <a href="" ng-click="model.selected = item.id" ng-repeat="item in items">
   {{item.name}}
  </a>

  <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>
  </div>
</body>

Demo Plunkr

edited Jul 10, 2016 at 18:03

answered Jul 10, 2016 at 17:55

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Rayon · Accepted Answer · 2016-07-10 17:55:34Z

Define first=true in ng-init so that you do not have to change your controller. But, I will suggest you to initialize it in controller

Also note that you must define other scope variables as false in controller becuase right now they are undefined(falsey) which is the reason code is executing as expected but defining it will make it more readable.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.first = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

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

Using ng-init

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="first = true">

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

Deep · Accepted Answer · 2016-07-10 17:59:11Z

1

You need to initialize it either in view or controller, here is how you can do that in the view

<body ng-controller="MainCtrl" ng-init="first=true">
  <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>
</body>

but as suggested by the comments and the angular docs you should prefer to initialize it in the controller.

app.controller('MainCtrl', function($scope) {
 $scope.first = true;
});

<body ng-controller="MainCtrl">
  <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>
</body>

edited Jul 10, 2016 at 17:59

answered Jul 10, 2016 at 17:47

Deep

9,7962 gold badges24 silver badges34 bronze badges

2 Comments

charlietfl Over a year ago

This is not what ng-init is for and it states such in the docs

Deep Over a year ago

Thanks for the info @charlietfl , i read the document docs.angularjs.org/api/ng/directive/ngInit . It do say to use it with cautions.

Collectives™ on Stack Overflow

Initialize ng-click value as true in angularjs

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related