각도 js에서 페이지로드시 값 설정

Question

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

각도 앱과 컨트롤러를 명시 적으로 정의 할 수 있습니다.

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