CODEWITHSUNDEEP
htmlangularjs
user3277733
user3277733

Reputation: 115

Showing and hiding content with AngularJS

I am trying to tab between to different content views using angular. Currently it starts out showing no content, and then toggles between the two views only after clicking on an option.

What I want it to do is show the first view on load, and then let me toggle between the two.

Here is the current code:

<div ng-app="">
  <div class="wrap">
    <h1>Hello there!</h1>
    <p>Push the radio buttons to change the content!</p>
    <form> 
      <label for="first">Show first content</label>
      <input id="first" type="radio" name="content" ng-model="content" value="first">
      <br />
      <label for="other">Show other content</label>
      <input id="other" type="radio" name="content" ng-model="content" value="other">
    </form>

    <div class="wrapper">
      <p ng-show="content == 'first'">This is the first content!</p>
      <h2 ng-show="content == 'other'">This is the other content!</h2>
    </div>
  </div>
</div>

http://codepen.io/er40/pen/NqWjRo

Upvotes: 0

Views: 324

Answers (4)

Alejandro Lora
Alejandro Lora

Reputation: 7802

Add this to first input:

ng-init="content = 'first'"

Upvotes: 0

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14764

You could set this initial state in your controller?

JavaScript (MyCtrl.js)

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

HTML

<div ng-app="myApp">
  <div class="wrap" ng-controller="myCtrl">
    <h1>Hello there!</h1>
    <p>Push the radio buttons to change the content!</p>
    <form> 
      <label for="first">Show first content</label>
      <input id="first" type="radio" name="content" ng-model="content" value="first">
      <br />
      <label for="other">Show other content</label>
      <input id="other" type="radio" name="content" ng-model="content" value="other">
    </form>

    <div class="wrapper">
      <p ng-show="content == 'first'">This is the first content!</p>
      <h2 ng-show="content == 'other'">This is the other content!</h2>
    </div>
  </div>
</div>

Don't forget to include the controller

<script src="./MyCtrl.js"></script>

Upvotes: 0

Mukund Kumar
Mukund Kumar

Reputation: 23181

use ng-init directive to set initial value to first. this code will help:

<div ng-app="">
  <div class="wrap">
    <h1>Hello there!</h1>
    <p>Push the radio buttons to change the content!</p>
    <form> 
      <label for="first">Show first content</label>
      <input id="first" type="radio" name="content" ng-model="content" value="first" ng-init="content='first'">
      <br />
      <label for="other">Show other content</label>
      <input id="other" type="radio" name="content" ng-model="content" value="other">
    </form>

    <div class="wrapper">
      <p ng-show="content == 'first'">This is the first content!</p>
      <h2 ng-show="content == 'other'">This is the other content!</h2>
    </div>
  </div>
</div>

Upvotes: 2

Erik Svedin
Erik Svedin

Reputation: 1286

That is because on initiation your model content is not set. You need to set it to 'first' if you want that content block to show.

another workaround if you dont want to mess with js is to add another condition for the first comment blocks ng-show. Eg show that chunk when content model is not set at all. Like so: http://codepen.io/svdn/pen/wavdgR

Upvotes: 0

Related Questions