Set value on page load in angular js

Question

I made tabs using angular js, problem is that i need to set value sel=1 at page load to show first content when page load. How can i resolve this.

<div ng-app="">
    <div ng-controller="myController">
        <ul>
            <li><a href ng:click="sel=1">First</a></li>
            <li><a href ng:click="sel=2">Second</a></li>
            <li><a href ng:click="sel=3">Third</a></li>
        </ul>

        <div ng:show="sel == 1">
            This is first content...
        </div>

        <div ng:show="sel == 2">
            This is second content...
        </div>

        <div ng:show="sel == 3">
            This is third content...
        </div>
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.19/angular-0.9.19.js"></script>
<script>
    function myController($scope) {
        $scope.sel = 1;
    }
</script>

JME · Accepted Answer · 2014-09-21 14:12:15Z

You can try explicitly defining the Angular app and controller.

<div ng-app="app">
    <div ng-controller="myController">
        <ul>
            <li><a href ng-click="sel=1">First</a></li>
            <li><a href ng-click="sel=2">Second</a></li>
            <li><a href ng-click="sel=3">Third</a></li>
        </ul>

        <div ng-show="sel == 1">
            This is first content...
        </div>

        <div ng-show="sel == 2">
            This is second content...
        </div>

        <div ng-show="sel == 3">
            This is third content...
        </div>
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.19/angular-0.9.19.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('myController', function ($scope) {
        $scope.sel = 1;
    });
</script>

Try the code above.

graphefruit · Accepted Answer · 2014-09-21 14:02:22Z

Try to set the NG-Init event, if this is to early, wrap with $(window).load event.

 <div ng-controller="myController" ng-init="initEvent()">
        <ul>
            <li><a href ng:click="sel=1">First</a></li>
            <li><a href ng:click="sel=2">Second</a></li>
            <li><a href ng:click="sel=3">Third</a></li>
        </ul>

        <div ng:show="sel == 1">
            This is first content...
        </div>

        <div ng:show="sel == 2">
            This is second content...
        </div>

        <div ng:show="sel == 3">
            This is third content...
        </div>
    </div>

<script>
    function myController($scope) {
        $scope.sel = 1;
        $scope.initEvent = function()
        {
           //init event for controller
           //if we're to early here try:
           $(window).load(function()
           {

           });
          // or
             $(document).ready(function()
           {

           });
        }
    }
</script>

Collectives™ on Stack Overflow

Set value on page load in angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related