javascript - Tabs in Angular Bootstrap -

-

i'm trying display couple of tabs using angular bootstrap, cannot see content displayed. see blank white page.

where wrong?

html-

<html ng-app = 'myapp'>   <head>      <title>chat</title>   </head>   <body>    <div ng-controller="tabs">      <tabset>         <tab heading="static title">static content</tab>         <tab ng-repeat="tab in tabs" heading="{{tab.title}}"   active="tab.active">          {{tab.content}}         </tab>        </tabset>       </div>  <script src="node_modules/angular/angular.js"></script> <script src="node_modules/angular-bootstrap/ui-bootstrap.js"></script>  <script src="app.js"></script>  </body>     </html>

app.js: controller here

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

i ensured loaded scripts properly. why tabs not displayed? did go wrong?

any appreciated. in advance!

edit : console in browser reads : 

xmlhttprequest cannot load file:///c:/users/nikhil/desktop/angular/template/tabs/tab.html. cross origin requests supported protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10514 angular.js:12330 error: failed execute 'send' on 'xmlhttprequest': failed load 'file:///c:/users/nikhil/desktop/angular/template/tabs/tab.html'.     @ error (native)     @ file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:10514:11     @ sendreq (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:10333:9)     @ serverrequest (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:10045:16)     @ processqueue (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:14567:28)     @ file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:14583:27     @ scope.$eval (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:15846:28)     @ scope.$digest (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:15657:31)     @ scope.$apply (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:15951:24)     @ bootstrapapply (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:1633:15)(anonymous function) @ angular.js:12330 angular.js:10514 xmlhttprequest cannot load file:///c:/users/nikhil/desktop/angular/template/tabs/tab.html. cross origin requests supported protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10514 angular.js:12330 error: failed execute 'send' on 'xmlhttprequest': failed load 'file:///c:/users/nikhil/desktop/angular/template/tabs/tab.html'.     @ error (native)     @ file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:10514:11     @ sendreq (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:10333:9)     @ serverrequest (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:10045:16)     @ processqueue (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:14567:28)     @ file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:14583:27     @ scope.$eval (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:15846:28)     @ scope.$digest (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:15657:31)     @ scope.$apply (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:15951:24)     @ bootstrapapply (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:1633:15)(anonymous function) @ angular.js:12330 angular.js:10514 xmlhttprequest cannot load file:///c:/users/nikhil/desktop/angular/template/tabs/tabset.html. cross origin requests supported protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10514 angular.js:12330 error: failed execute 'send' on 'xmlhttprequest': failed load 'file:///c:/users/nikhil/desktop/angular/template/tabs/tabset.html'.     @ error (native)     @ file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:10514:11     @ sendreq (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:10333:9)     @ serverrequest (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:10045:16)     @ processqueue (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:14567:28)     @ file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:14583:27     @ scope.$eval (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:15846:28)     @ scope.$digest (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:15657:31)     @ scope.$apply (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:15951:24)     @ bootstrapapply (file:///c:/users/nikhil/desktop/angular/node_modules/angular/angular.js:1633:15)(anonymous function) @ angular.js:12330 2angular.js:12330 error: [$compile:tpload] failed load template: template/tabs/tab.html (http status: undefined undefined) http://errors.angularjs.org/1.4.3/$compile/tpload?p0=template%2ftabs%2ftab.html&p1=undefined&p2=undefined     @ angular.js:68     @ handleerror (angular.js:17530)     @ processqueue (angular.js:14567)     @ angular.js:14583     @ scope.$eval (angular.js:15846)     @ scope.$digest (angular.js:15657)     @ scope.$apply (angular.js:15951)     @ bootstrapapply (angular.js:1633)     @ object.invoke (angular.js:4450)     @ dobootstrap (angular.js:1631)(anonymous function) @ angular.js:12330 angular.js:12330 error: [$compile:tpload] failed load template: template/tabs/tabset.html (http status: undefined undefined) http://errors.angularjs.org/1.4.3/$compile/tpload?p0=template%2ftabs%2ftabset.html&p1=undefined&p2=undefined     @ angular.js:68     @ handleerror (angular.js:17530)     @ processqueue (angular.js:14567)     @ angular.js:14583     @ scope.$eval (angular.js:15846)     @ scope.$digest (angular.js:15657)     @ scope.$apply (angular.js:15951)     @ bootstrapapply (angular.js:1633)     @ object.invoke (angular.js:4450)     @ dobootstrap (angular.js:1631)(anonymous function) @ angular.js:12330

edit 2 : included <script src="ui-bootstrap-tpls-0.13.1.js"></script> in code now. errors have gone.

this displayed.

enter image description here

this expected result.

enter image description here

chrome.exe --allow-file-access-from-files

or

chrome.exe --allow-file-access-from-files --disable-web-security

you should load boostrap

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

add between <head> , </head>


Comments

Post a Comment

Popular posts from this blog

qt - Using float or double for own QML classes -

-
i've created components , helper methods using c++ , qt used in qml gui. of methods calculate gui elements (size, transformations, scene graph items creation). target arm 32 bit using opengl / eglfs render output. opengl using float , qml using real (defined double ). what should use in c++ do not lose precision? if use qreal ( double ) shouldn't lose precision. if git grep float in qtbase.git , can find out bit more: dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0-* important behavior changes * dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0- dist/changes-5.2.0- - qt compiled qreal typedef'ed double on dist/changes-5.2.0: platforms. qreal float on arm chipsets before. guarantees more dist/changes-5.2.0- consistent behavior between platforms qt supports, binary dist/chan...
Read more

Create Outlook appointment via C# .Net -

-
i need create outlook appointment using microsoft.office.interop.outlook , while can work locally on own workstation , works if run web application via server's browser, not work when connect server externally. hence, think might permission issue. i changed application pool identity " localsystem " don't access denied error. unfortunately, doesn't work. the app behaves if appointment created, appointment doesn't appear in outlook. here include file on top of aspx.cs page using outlook = microsoft.office.interop.outlook; here code using pop appointment. outlook.application apptapp = new outlook.application(); outlook.appointmentitem appt = apptapp.createitem(outlook.olitemtype.olappointmentitem) outlook.appointmentitem; appt.subject = txtfirstname.text + " " + txtlastname.text; appt.body = txtcomment.text; appt.alldayevent = false; appt.start = datetime.parse(txtreminderdate.text + " 8:00 am"); appt.end = datetime.p...
Read more

ios - Swift Array Resetting Itself -

-
i have 2 arrays: pointhistory , datehistory . have nstimer , , when timer runs out, action called. in action appending int pointhistory , , current date string datehistory . here timer action: func timeraction() { let steppervalue = int(stepper.value) employee.numberofpoints = steppervalue networking.saveemployee(employee, completion: { (error) -> void in if error != nil { let alert = uialertcontroller(title: "error", message: "there error updating \(self.employee.name)'s points", preferredstyle: .alert) let alertaction = uialertaction(title: "ok", style: .cancel, handler: nil) alert.addaction(alertaction) self.presentviewcontroller(alert, animated: true, completion: nil) } }) var dateformatter = nsdateformatter() dateformatter.dateformat = "mm-dd-yyyy" dateformatter.timezone = nstimezone.localtimezone() var date = nsdate() var ...
Read more