I have created a dropdown using angularjs and bootstrap.
i want to open a link if it clicks any value from the the dropdown.
But not able to get the data in the dropdownlist.
Below is the fiddle link.help is much appreciated:-
Code goes here:-
HTML Code
<div ng-app="myApp" ng-controller="myController">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data- toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" ng-repeat="item in items">
<li>{{item.GroupName}}</li>
</ul>
</div>
</div>
Controller
var myApp=angular.module("myApp",[]);
myApp.controller("myController",['$scope',function($scope){
$scope.items=[{"GroupID":"15","GroupName":"Client Management Product"},
{"GroupID":"5","GroupName":"DevOps"},
{"GroupID":"18","GroupName":"Resource Centre"},
{"GroupID":"16","GroupName":"SEF"},
{"GroupID":"17","GroupName":"Shared Services"}]
}]);
http://jsfiddle.net/smsh/st4hn14a/
Hi you have not added boootstrap.min.js and jQuery as external resources in your example
Check this Demo
<ul class="dropdown-menu">
<li ng-repeat="item in items">{{item.GroupName}}</li>
</ul>
Related
I am trying to create a UI bootstrap dropdown in a Django project.
This is my html code:
<div class="container">
<div ng-controller="mainController">
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Discrete Distributions <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li ng-repeat="discrete in discretes">
<a href>{% templatetag openvariable %} discrete {% templatetag closevariable %}</a>
</li>
</ul>
</div>
</div>
</div>
And this is my js code:
var stats = angular.module('stats', ['rzModule', 'ui.bootstrap']);
stats.controller('mainController', ['$scope', '$log',
function($scope, $log){
$scope.discretes = ['Bernoulli', 'Binomial', 'Multinoulli', 'Multinomial', 'Geometric', 'Poisson'];
}]);
Output looks like the below picture. I tried all dropdown codes in here. I am new at both Angularjs and Django but I think it is about Django. Unfortunately I couldn't find the reason. Please help me to find it.
Have you tried displaying the raw value of 'discretes' onto the screen to see what it contains? This might help you to isolate the issue.
I am trying to use ng-repeat in bootstrap dropdown menu, but it does not display the list of elements in drop down. am i missing anything in populating the elements of drop down list from a method defined in controller.
<button type="button" class="btn btn-default btn-sm" title="Results Per Page">
<span class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
{{Temp.obj.pageSize}} Results Per Page </a>
<ul class="dropdown-menu">
<li data-ng-repeat="result in Temp.obj.availPages">
<a href data-ng-click="Temp.obj.setSize(result)">
{{result}}</a>
</li>
</ul>
</span>
</button>
You are simple missing the dropdown-menu directive in the ul list.
As a reminder, here is the (simplified) example from the angular-ui bootstrap doc.
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
</ul>
</div>
It looks like you are using an old version of angular-ui bootstrap when the directive were not prefixed by uib-. I recommend updating your version if you can. Otherwise, just remove the prefixs from the example.
Edit: As you are using the version 1.1.2 of angular-ui bootstrap, you need to prefix the directives as shown in this answer. And here is the doc for reference
I'm working with angular and have the next issue: I have a group of accordions which have a dropdown menu on the header. I want to expand the last added element to the group of accordions, so I added an additional paramater _isOpen and when I add a new element: _isOpen = true. Everything works, but dropdown on the accordions' header opens as well as accordion.
Here's how it looks in angular:
<uib-accordion close-others="oneAtATime">
<uib-accordion-group template-url="./custom-template.html" is-open="element._isOpen" ng-repeat="element in rlFull.elements track by element.Id" scroll-glue>
<div class="testing-table" ui-ace="{ onLoad : aceLoaded, mode: 'gherkin', theme: 'chrome'}" ng-model='element.Text' join-steps-array style="height : 200px"></div>
</uib-accordion-group>
</uib-accordion>
And part from template with dropdown meny:
<div class="action-block">
<div uib-dropdown="dropdown" class="dropdown-holder">
<button uib-dropdown-toggle="" class="btn">
Actions
<span class="ico-dropdown"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li>
Save
</li>
<li>
Delete
</li>
</ul>
</div>
</div>
I added is-open = false for uib-dropdown and it helped me:
<div class="action-block">
<div uib-dropdown="dropdown" class="dropdown-holder" is-open="false">
<button uib-dropdown-toggle="" class="btn">
Actions
<span class="ico-dropdown"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li>
Save
</li>
<li>
Delete
</li>
</ul>
</div>
</div>
I have copied code directly form the Angular Bootstrap UI Plunkr
I am using a blank Angular FullStack (Mean) template for building an application.
When I use the code from the Angular Bootstrap uib-dropdown it ends up formatted incorrectly and does not work, all other angular bootstrap components seem to work fine
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
Upgrade Angular UI in bower.json:
"angular-bootstrap": "~0.14.3",
Then run:
bower install
I have solved my problem by not using the Angular Bootstrap Dropdown directive and gone with Bootstrap + Plain Old Angular code which I googled.
This is working fine for me.
<div class="input-group">
<div class="btn-group" ng-class='{open: open}'>
<button class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
ng-click='open=!open'>
Action<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="choice in ['the', 'quick', 'brown', 'fox']"
ng-click="setChoiceIndex($index);$parent.open =!$parent.open">
{{choice}}
</li>
</ul>
</div>
</div>
I had this problem. I updated Angular UI Bootstrap to 0.14.3 version & then resolved the problem.
You should use 'uib-' prefix for each directive, check this answer:
https://stackoverflow.com/a/34725928/3439101
Being new to Angularjs, I need a bit of help with this issue. I am attempting to add ng-click="getGallery(57)" to a modal tab. Adding via jQuery is not the issue, however I realize when I do this, Angular is not compiling the newly added ng-click. I have a simple controller
function imageGalleryCtrl ($scope, $http) {
//get gallery info on click
$scope.getGallery = function(id)
{
$http.post('/beta/images/get_images',{'id': id}).success(function(data)
{
$scope.images = data.thisGal_images;
$scope.images.galID = id;
});
};
}
I add the ng-click to the element with jQuery
//Edit image tab to use angularjs
$('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')');
How do I force Angular to compile this newly added ng-click?
Thanks!
HTML Modal:
This is the modal that is called when the gallery name is clicked.
<div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h3>Create New Gallery</h3>
</div>
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
Edit Image Gallery
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="home">
<?php include('create.php'); ?>
</div>
<div class="tab-pane fade" id="upload">
<?php include('upload.php'); ?>
</div>
<div class="tab-pane fade" id="edit">
<div class="span9">
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt="">
{{image.orgName}}
</li>
</ul>
</div><!-- /span9 -->
</div><!-- /row -->
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
Close
Next
</div>
</div>
Update
So really attempting to do this the Angular way, and after some studies here is where I am at.
The controller is the same as above and I have updated the tabs on the modal as follows.
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
<a ng-click="getGallery(57)" href="#edit" data-toggle="tab">Edit Image Gallery</a>
</li>
</ul>
If I hard code the ng-click as above, the tab updates as expected. What I am trying to make happen, is when the modal is called, (#image_edit a) gets a defined ng-click="getGallery(id). I need to tell Angular to look at the ng-click again for the id.
Although I too think that you should try and find another approach, the answer to your question
How do I force Angular to compile this newly added ng-click?
is
// remove and reinsert the element to force angular
// to forget about the current element
$('#button1').replaceWith($('#button1'));
// change ng-click
$('#button1').attr('ng-click','exec2()');
// compile the element
$compile($('#button1'))($scope);
See this working example: http://plnkr.co/edit/SgvQzaY0TyFHD1Mf0c3F?p=preview
Basically what I'm getting at is you want to probably make this happen:
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img
ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}"
alt=""
ng-click="getGallery(image.galleryID)"
>
{{image.orgName}}
</li>
</ul>
The problem is I'm unsure of the relationship between the settings.id and the galleryID for a particular image. If you can set up this relationship in the data so it just automatically binds you're in better shape.