use*_*589 3 javascript angularjs
app2.js
(function(){
var app = angular.module("panel",[]);
app.controller('PanelController',function(){
this.tab = 1;
this.setTab = function(setTab){
this.tab = setTab;
};
});
})();
Run Code Online (Sandbox Code Playgroud)
而且view是:
<html ng-app="panel">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app2.js"></script>\
<style type="text/css">
li{
width:100px;
}
</style>
</head>
<body>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills" >
<li ng-class="{active:tab === 1}"><a ng-click="panel.setTab(1)" href="#">1</a></li>
<li ng-class="{active:tab === 2}"><a ng-click="tab = 2" href="#">2</a></li>
<li ng-class="{active:tab === 3}"><a ng-click="tab = 3" href="#">3</a></li>
<li ng-class="{active:tab === 4}"><a ng-click="tab = 4" href="#">4</a></li>
</ul>
<h1>{{tab}}</h1>
<div class="panel">
<p ng-show="tab===1">Suppose this is Data coming from object for 1 </p>
<p ng-show="tab===2">Suppose this is Data coming from object for 2 </p>
<p ng-show="tab===3">Suppose this is Data coming from object for 3 </p>
<p ng-show="tab===4">Suppose this is Data coming from object for 4 </p>
</div>
</section>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
单击panel.set(1)时未调用的问题<a>.为什么会这样?tab控制器内的属性都没有被访问.
panel.setTab被调用.问题是由tab模板中的变量引起的.你应该用它们替换它们panel.tab.
<section ng-controller="PanelController as panel"> 意思是
$scope.panel = new PanelController();
Run Code Online (Sandbox Code Playgroud)
所以如果你想在你的控制器中使用变量.你应该添加panel.前缀,否则就意味着$scope.tab
| 归档时间: |
|
| 查看次数: |
63 次 |
| 最近记录: |