在Angular JS中设置页面加载的值

Question

我使用angular js制作了标签，问题是我需要在页面加载时设置值sel = 1才能在页面加载时显示第一个内容。 我该如何解决。

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

Answer 1

您可以尝试显式定义Angular应用程序和控制器。

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

试试上面的代码。

Answer 2

尝试设置NG-Init事件，如果要设置得早，则用$（window）.load事件包装。

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