Sunday 15 February 2015

javascript - Creating tabs using Bootstrap and angular -



javascript - Creating tabs using Bootstrap and angular -

i trying run sample code, ui.bootstrap.tabs using bootstrap , angular.js . html code in aspx , utilize .net framework 3.5

the example.js has:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('tabsdemoctrl', function($scope) { $scope.tabs = [ { title: 'dynamic title 1', content: 'dynamic content 1' }, { title: 'dynamic title 2', content: 'dynamic content 2', disabled: true }

];

$scope.alertme = function() { settimeout(function() { alert('you\'ve selected alert tab!'); }); };

});

the html part:

<link href="css/bs/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <div ng-controller="tabsdemoctrl"> select tab setting active binding true: <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">select sec tab</button> <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">select 3rd tab</button> <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">enable / disable 3rd tab</button> <script src="jsnew/example.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js" type ="text/javascript"> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js" type ="text/javascript">

when run error microsoft jscript runtime error: 'angular' undefined pointing on first line of example.js . please 1 help, directive missing. or 1 give me sample . want create tabs using bootstrap , angularjs.not worked on angular , bootstrap . in advance.

you included angular after example.js, angular isn't defined when seek utilize it. need include dependencies in order, , create sure close script tags. move example.js below angular , should go!

<script src="jsnew/example.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js" type="text/javascript"> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js" type="text/javascript">

should be:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js" type="text/javascript"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js" type="text/javascript"></script> <script src="jsnew/example.js" type="text/javascript"></script>

javascript css angularjs twitter-bootstrap

No comments:

Post a Comment