I am using angular material V1.1.1 and angular js version 1.3.13.I have used md-select to select a value from dropdown. When I click on md-select , it shows the md-options value but hangs the whole screen and i am unable to click anywhere in the page as it adds a md-scroll-mask .I am not sure what causes the problem.
Any help would be appreciated
Make sure you have loaded the angular-aria and animate references correctly
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
DEMO
Related
I'm trying to implement Angular UI Bootstrap Iconpicker in my project but it doesn't work because I'm using those js files for angularjs tabs:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
and for ui-iconpicker I use those files:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="#routes.Assets.versioned("bower_components/ui-iconpicker/dist/scripts/ui-iconpicker.min.js")"></script>
I think there is a confusion between the two files (ui-bootstrap-tpls) but when I remove one of them the associated component don't work!! any help please
This problem is known to the author of ui-iconpicker.
See ui-iconpicker Issue #4: Doesn't work with ui-bootstrap >= 0.11.0
#justin-lau justin-lau added the wontfix label on Jan 29, 2015
#rapheki commented on May 20:
i had a similar issue, you need to modifiy the ui-iconpicker.js file and replace in line 156 (the templates/iconpicker.html):
"dropdown>" to "uib-dropdown>"
"dropdown-toggle>" to "uib-dropdown-toggle>"
on my html header i have this two lines:
<html>
<head>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
but if i have this two lines at the same time, bootstrap doesn't work. If i comment the line of the angularjs and leave the line for bootstrap alone, bootstrap will process correctly and format the elements on the page.
i have already tried change the order on headers and add diferent links to download the files, but nothing have worked.
Anyone knows a solution for both to work at the same time?
Thanks
You get the followed error in your console:
Uncaught Error: Bootstrap's JavaScript requires jQuery
So just do it as follow, and you get no errors:
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
This must work :)
https://docs.angularjs.org/guide/expression
The simplest example using data bindings =
<span>
1+2={{1+2}}
</span>
works with
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
and the output is 1 + 2 = 3
but if I change to the current workable angular script
<script data-require="angular.js#*" data-semver="2.0.0-alpha.25" src="https://code.angularjs.org/2.0.0-alpha.25/angular.js"></script>
the output is 1+2={{1+2}}
So why does the current angular not allow this simple data binding example to work?
https://code.angularjs.org/2.0.0-alpha.25/angular.js return 404 page
So, please use another version of angular.
your script should be like this
<script data-require="angular.js#*" data-semver="2.0.0-alpha.25" src="https://code.angularjs.org/2.0.0-alpha.25/angular2.js"></script>
if you want to know about more working version of angular then visit this
list of Angular working Version
I am new in angular js.Creating a stuff using angular js.Using radio button to select item .But this not running in my sysytem. http://jsfiddle.net/NfPcH/559/. copyied code form jsfiddle.
It contain the file
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.7/angular.min.js" type="text/javascript"></script>
Got output
{{ showStatus() }}
Any body say the reason of not running the code in my system?
editable-radiolist and e-ng-options are not standard angular directives.
Click on 'External Resources' on the left - u'll see that this example also uses:
xeditable.js
bootstrap.min.css
xeditable.css
checklist-model.js
I've added the required tags, but it is still not showing. I've added this in head:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'lt', parsetags:'explicit'}
</script>
and this in the body:
<g:plusone href="http://www.fanuspinta.lt/katalogas/lietuva-mar%C5%A1kin%C4%97liai-31"></g:plusone>
At first I thought it didn't show up because I was using a local server, but now it's in production, and still not showing.
URL in case: http://www.fanuspinta.lt/katalogas/lietuva-mar%C5%A1kin%C4%97liai-31
Thanks for any ideas.
I used a html5 tag like shown here without the data-href attribute, dynamically added it afterwards (when the lightbox was loaded) and explicitely loaded the div containing the plusone code at the end.