I have an array on object like this:
$scope.techniques = [
{
programmes : 'genie' ,
documents :[
{
menuTag: 'Moments et Centroïdes',
titre: "Moments et Centroïdes",
contenu: "moment.html"
}]
},
{
programmes : 'test' ,
documents :[
{
menuTag: 'test de test',
titre: "test",
contenu: "test.html"
}]
}
];
I am trying to build my menu with nested ng-repeat and exemple found on stackoverflow are not working. Cant figure ou why.
Here is my html;
<button ng-repeat="tech in techniques" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{tech.programmes}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="doc in tech.documents"><a href="../{{doc.contenu}}" ng-cloak>{{doc.menuTag}}</a></li>
</ul>
I can see the programmes but I cant see the documents inside programmes.
What am I doing wrong?
It's because you're trying to access "tech" outside of the first ng-repeat-scope. So it's not beeing nested.
<div ng-repeat="tech in techniques">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
{{tech.programmes}}
<span class="caret"></span>
</button>
<ul ng-repeat="doc in tech.documents" class="dropdown-menu">
<li><a href="../{{doc.contenu}}" ng-cloak>{{doc.menuTag}}</a></li>
</ul>
</div>
Your two ng-repeats are not actually nested. In order to nest two ng-repeats, the second ng-repeat should be within the range of the first ng-repeat. You cannot access the 'tech' outside the button element. To make it work, wrap both button and ul inside a div, and define the first ng-repeat on the div instead of button.
Because you are not under the iteration of $scope.techniques.
<button ng-repeat="tech in techniques" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{tech.programmes}}
<span class="caret"></span>
</button>
<!-- tech does not existe anymore-->
<ul ng-repeat="doc in tech.documents" class="dropdown-menu">
<a href="../{{doc.contenu}}" ng-cloak>{{doc.menuTag}}</a></li>
</ul>
Related
I am using knockout and I am trying to hide or display two buttons based on the a value of a boolean that I have named server but I am not quite getting it right. Below is the code that I have come up with so far please assist I think there is something missing in my syntax
<!-- ko if: server -->
<a class="btn btn-small" data-bind="css: { 'device-action-on': status(), 'device-action-off': !status() }, click: $root.deviceMetricsVM.toggleSensorState">
<i class="fa fa-power-off"></i> </a>
<a class="btn btn-small" data-bind="css: { 'device-action-on': mode(), 'device-action-off': !mode() }, click: $root.deviceMetricsVM.toggleHomeMode">
<i class="fa fa-home"></i>
</a>
<!-- /ko-->
<!-- ko ifnot: server -->
<a class="btn btn-small" data-bind="css: { 'device-action-on': status(), 'device-action-off': !status() }, click: $root.deviceMetricsVM.toggleSensorState" style="display:none;">
<i class="fa fa-power-off"></i>
</a>
<a class="btn btn-small" data-bind="css: { 'device-action-on': mode(), 'device-action-off': !mode() }, click: $root.deviceMetricsVM.toggleHomeMode" style="display:none;">
<i class="fa fa-home"></i>
</a>
<!-- /ko-->
I would display the value of server to the UI to make sure it's the value you think it is. It might be that "server" is out of scope for that particular HTML.
Put this at the top of the HTML and see what happens.
<span>Server value: </span>
<span data-bind="text: server"></span>
Make sure to check your browser JavaScript console output for clues and errors.
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 am populating a dropdownbutton from a array. The whole key value pair is being shown as you see in the picture.
1) I need to show only the value of Label.
2) I want to have "ALL LOCATIONS" as a default item.
Here is how the Locations look like :
Locations:Array[2]
0:Object
$$hashKey:"object:772"
Id:1600
Label:"California"
__proto__:Object
1:Object
$$hashKey:"object:773"
Id:1600
Label:"Atlanta"
__proto__:Object
HTML :
<div class="btn-group btn-toolbar btn-margin-left" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
ALL LOCATIONS {{selectedItem}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="Label in Summary.Locations">
<a ng-click="dropboxitemselected(Label)">
{{Label}}</a>
</li>
</ul>
</div>
js :
WotcDashBoardModuleService.GetDashBoardSummary(Ein).then(function (response) {
$scope.Summary = response.data.WotcSummary;
$scope.selectedItem;
$scope.dropboxitemselected = function (item) {
$scope.selectedItem = item;
//alert($scope.selectedItem);
}
console.log($scope.Summary);
});
Summary.Locations is your array of objects, so Label gets bound to each element individually. That means you need to show {{Label.Label}} instead of just {{Label}} and you'll see the name.
This part:
ALL LOCATIONS {{selectedItem}}
Should be replaced with:
<span ng-if="!selectedItem">ALL LOCATIONS</span>
<span ng-if="selectedItem" ng-bind="selectedItem.Label"></span>
Or with:
<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
My Angular code
<div ui-tree="rootTree" data-drag-enabled="false">
<ol ui-tree-nodes="" ng-model="course.sections" ng-class="{hidden: collapsed}">
<li ng-repeat="section in course.sections" ui-tree-node> <div ui-tree-handle class="tree-node tree-node-content" ng-click="editSection(section)" >
<a class="btn btn-success btn-xs"ng-if="section.sectionInstances && section.sectionInstances.length > 0" data-nodrag ng-click="toggle(this)">
<span class="glyphicon glyphicon-chevron-down" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed }">
</span>
</a>
{{section.sec_name}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeSection(section)">
<span class="glyphicon glyphicon-remove">
</span>
</a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="addSectionInstance(section)" style="margin-right: 8px;">
<span class="glyphicon glyphicon-plus">
</span>
</a>
</div>
</li>
</ol>
</div>
If i use data-drag-enabled="false", then ng-click function is calling. I want both the function drag and drop as well as ng-clik function.
If you are just wanting to perform functionality on 'dragStart', then it appears according to the angular-ui-tree documentation, that you can define treeOptions in your controller and assign them to your tree directive attribute value.
myAppModule.controller('MyController', function($scope) {
$scope.treeOptions = {
dragStart: function(sourceNodeScope, destNodesScope, destIndex) {
// Do things here
},
dragEnd: function(sourceNodeScope, destNodesScope, destIndex) {
}
};
});
<div ui-tree="treeOptions">
<ol ui-tree-nodes ng-model="nodes">
<li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li>
</ol>
</div>
same trouble here, few years after.
Sean answer doesn't seem to answer the question.
issue:
* with drag n drop enable: I can't use ng-click to remove/edit a node, but I can drag n drop it.
* w/o drag n drop enable: my ng-click works.
Solution:
move the "ui-tree-handle" from the global div to specific location w/o any ng-click in.
I want to bring drop downs into my project and I took the code from the example. The drop down appears as in the example but when I click it nothing happens.
<form class="form" name="form" novalidate>
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button"
class="btn btn-primary dropdown-toggle"
dropdown-toggle
ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div>
</form>
Now the controller for this html:
angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
});
I had the same problem and I solved by deleting the line dropdown-toggle
I don't know what the problem is but it works well in this way
Here what I did:
This si the original example:
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
and this is the code without dropdown-toggle
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Edit:
The above example works if you are using angular-ui-bootstrap Version: 0.10.0
Now I've changed the ui-bootstrap using this
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
And now all work like a charm
There are a few problems in your code:
Your HTML is not valid, the last <div> tag shouldn't be there
<form class="form" name="form" novalidate>
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button"
class="btn btn-primary dropdown-toggle"
dropdown-toggle
ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li>
Separated link
</li>
</ul>
</div>
</form>
You did not reference ui.bootstrap as a module dependency
angular.module('startupApp', [
'ui.bootstrap'
])
Did you include the right files ?
AngularJS
Angular UI Bootstrap
Bootstrap CSS
You don't need anything special in your controller, the dropdown and dropdown-toggle directives are self-sufficient.
JsFiddle Demo
After much struggle I just found the answer that worked for my case. I only needed to add parse-angular to my angular.module('myapp'['parse-angular']).
First I want to say thank you to Jorge Casariego for his answer. His answer helped me to get much further.
There was one problem at the end though, that neither $scope.toggled = function(open) {...} nor $scope.toggleDropdown = function($event) {...} where called when someone interacted with the Dropdown (see example of them here). After looking into the ui-bootstrap-tpls-0.10.0.js code I had to further adjust the html-code:
the attribute dropdown should be a class-value not a attribute itself.
is-open=... is not needed, ui-bootstrap will take care of it
attach a ng-click to the <a> element in the list.
This did not work for me (dropdown as an attribute):
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle"
ng-disabled="disabled">
Choose category <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="category in interactions">
<a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
{{category.displayName}}
</a>
</li>
</ul>
</div>
But this did (add dropdown as a class value):
<!-- Single button -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-primary dropdown-toggle"
ng-disabled="disabled">
Choose category <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="category in interactions">
<a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
{{category.displayName}}
</a>
</li>
</ul>
</div>
The rest of my Angular App looks like this then:
$scope.toggleDropdown = function($event) {
$event.preventDefault();
console.log('This is your event now: ', $event);
};
I know there are newer versions available of angular-ui-bootstrap, but for the record I put it up here. It works with version 0.10.0.