I am trying to do dynamic navigation using ul and li. But i am not able to do for sub menu navigation, i am able to display parent menu only. I am using hashmap by using string and list as key value pairs.
Here's my code implemented
In angularjs script code:
$scope.listMap = [{'key':'Parent Menu', 'values':objectList}];
<div ng-repeat="(key,values) in listMap">
<ul>
<li>{{key}}
<div ng-repeat="value in values">
<ul>
<li>{{value.object.name}}</li>
<ul>
</div>
</li>
</ul>
</div>
It displays only parent menu but sub menu is not displaying, that i need another that if any of the parent menu that doesn't have sub menu i need to check that one in order to avoid running ul inside the main ul.
Can you please help me to proceed or share any examples for dynamic menus for navigation using angularjs.
Look at the code below. It is totally possible to do it. You just need to improve the structure of the data.
var app = angular.module('app',[]);
app.controller('controller', function($scope) {
$scope.listMap = [{
name: 'Home',
value: [{
name: 'File'
}, {
name: 'Items'
}]
}, {
name: 'Second Menu',
value: [{
name: 'Nothings'
}, {
name: 'Ooo LA LA'
}]
}, ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<div ng-repeat="item in listMap">
<ul>
<li>{{item.name}}
<div ng-repeat="value in item.value">
<ul>
<li>{{value.name}}</li>
<ul>
</div>
</li>
</ul>
</div>
</div>
Related
I have an array and I want to take specific element from it using directive (for example array[0]), but I don't understand how to achieve it. I realize that this is the basics of angularjs but I can't find anywhere a solution. Please help :)
Here's the array
$scope.array = [
{
text: '1',
},
{
text: '2',
},
{
text: '3',
}]
And I use that construction in a view
<div ng-repeat="element in array">
<content></content>
</div>
And this is what contains that directive
<p>{{array.text}}</p>
In html :
In content directive you will have to add
bindToController: {data: "="}
You could set the same var in your directive instead of data
<div ng-repeat="element in array">
<content></content>
</div>
directive:
<p>{{element.text}}</p>
If the directive is about customer data you should use {{ customer.text }}, if that is the case you can continue using the same scope like this ...
<div ng-repeat="customer in array">
<content></content>
</div>
directive:
<p>{{customer.text}}</p>
I have data on some bikes in my HTML page. I have to filter that data via an on click function. I have used a filter in the text box area, but I want the same functionality via an on click function.
So how can I bind the filter with the click function?
http://jsfiddle.net/3G7Kd/114/
<div ng-app='app' class="filters_ct">
<ul class="nav" ng-controller="selectFilter">
<li ng-repeat="filter in filters" ng-click="select($index)" ng-class="{sel: $index == selected}">
<span class="filters_ct_status"></span>
{{filter.name}}
<ul class="subul" ng-if=filter.lists.length>
<li ng-repeat="list in filter.lists" ng-click=" $event.stopPropagation()">
<input type="checkbox"> {{list}}
</li>
</ul>
</li>
</ul>
<input type="text" ng-model="search">
<div ng-controller="listctrl">
<div class="list" ng-repeat="list in lists | filter:{brand:search}">
{{list.brand}}
{{list.year}}
</div>
</div>
</div>
Angular
var app = angular.module('app', []);
app.controller('selectFilter', function($scope) {
$scope.filters = [
{
"name": "brand",
'lists': ['yamaha','ducati','KTM','honda']
},
{
'name': "year",
'lists': [2012,2014,2015]
}
];
$scope.selected = 0;
$scope.select= function(index) {
if ($scope.selected === index)
$scope.selected = null
else
$scope.selected = index;
};
});
app.controller('listctrl', function($scope) {
$scope.lists = [
{
"brand": "ducati",
'year': 2012
},
{
'brand': "honda",
'year': 2014
},
{
'brand': "yamaha",
'year': 2015
},
{
'brand': "KTM",
'year': 2012
}
];
});
You already knew how to use the filter when given an object within the partial. I moved one of your controllers so that you have an outer and an inner controller.
<div ng-app='app'ng-controller="MainCtrl as mainCtrl">
<div ng-controller="listCtrl">
<!-- your filter object is now accessible here -->
</div>
</div>
I added a scope variable to the outer controller $scope.activeFilters (filling this you should be able to do on your own, see the plunker for one possible solution.
This object is now changed when clicking on the checkboxes. As $scope.activeFilters is now accessible from the inner controller we can pass it to the filter as before:
<div class="list" ng-repeat="list in lists | filter:activeFilters">
{{list.brand}}
{{list.year}}
</div>
Note that there are probably nicer solutions (using the checkbox with a model among other things).
Working plunker:
http://jsfiddle.net/ywfrbgoq/
I am using the directive angular-selection-model for creating selectable lists.
EDIT:
I have a selectable list generated by the code below:
in codepen
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://cdn.rawgit.com/jtrussell/angular-selection-model/master/dist/selection-model.js"></script>
<div ng-app="theApp" ng-controller="controller">
<ul>
<li ng-repeat="item in stuff track by $index" selection-model selection-model-mode="multiple-additive">
{{item.label}} - {{item.selected}}
</li>
</ul>
</div>
JS:
var myapp = angular.module('theApp', ['selectionModel']);
myapp.controller('controller', function ($scope) {
$scope.stuff = [
{selected: false, label: 'Scotchy scotch'},
{selected: true, label: 'Monacle'},
{selected: true, label: 'Curly mustache'},
{selected: false, label: 'Top hat'}
];
});
I would like to be able to select multiple objects by mouse dragging - as in this example. How do I enable this functionality?
Here is some example for angular drag selection
Sorry for answer in only link but you may understand good enough than my explanation.
1) http://jsfiddle.net/few5E/
2) https://github.com/willgm/ngSelectable
3) https://github.com/jonotron/angular-selectable
What I mean is, say I have this HTML:
<ul ng-controller="ContactsCtrl">
<li ng-repeat="contact in contacts">
<div class="name">{{name}}</div>
<div class="email">{{email}}</div>
</li>
</ul>
This works just fine if I initialize the contacts collection from JavaScript:
app.controller('ContactsCtrl', ['$scope', function($scope) {
$scope.contacts = [
{ name: 'Dan', email: 'dan#example.com' },
{ name: 'Bob', email: 'bob#example.com' }
];
}]);
What if, instead, I want to initialize the contents of the collection from the HTML side? Something like:
<ul ng-controller="ContactsCtrl" ng-model="contacts">
<li>
<div class="name" ng-bind="name">Dan</div>
<div class="email" ng-bind="email">dan#example.com</div>
</li>
<li>
<div class="name" ng-bind="name">Bob</div>
<div class="email" ng-bind="email">bob#example.com</div>
</li>
</ul>
And then from JavaScript I would have $scope.contacts initialized based on what I have in the HTML.
Is this possible?
you can do a ng-init="" in your html to initialize a variable or sets of variables but that doesn't seem to be quite what your asking. Why would you want your second example? What are you trying to do with it?
Rather use jQuery and parse HTML DOM, if You have at least... 500 records, other way is 'copy and paste' - it will be faster.
Here is short info 'how it works'
Tutorial
I am really new to Angular and this is the first time that I am dealing with routing, so please excuse me if my questions are a bit confusing. My actual logic and structure for this app is much more complex and I am using several services, but this is the general idea of the part that I am having issues with. I would really APPRECIATE your help! Thanks.
SOLVED
I was adding the same template recursively. Inside the template, I changed that ng-repeat template to another one and it worked perfectly. http://jsfiddle.net/GeorgiAngelov/9yN3Z/111/
UPDATED
jsFiddle: http://jsfiddle.net/GeorgiAngelov/9yN3Z/106/
I updated my fiddle thanks to Chandermani ( I removed all the controllers and left only one copy of it) but now I get "10 $digest() iterations reached" whenever I click on the Add Root button OR whenver I click on a section it keeps giving me that error... No idea why.
So I have an app where I have a menu on my left side where I can add more elements called sections to that menu. That menu section item is derived from an array called sections that sits in my controller and when you add a section it adds it to the array named sections.
$scope.sectionId = $routeParams.sectionId;
$scope.sections = [];
$scope.counter = 1;
$scope.section = {};
$scope.addSection = function(){
$scope.sections.push({
id: $scope.counter++,
name: 'Random Name',
roots: []
});
};
*HTML for sections *
<body ng-app="myApp" ng-controller="MyController">
<div class="tabbable tabs-left pull-left">
<ul class="nav nav-tabs">
<li ng-repeat="section in sections" ng-click="setSectionSelected(section)" ng-class="{active : isSectionSelected(section)}">{{section.name}}</li>
</ul>
<button class="addSection btn btn-success" ng-click="addSection()" style="position:relative; bottom: 0;">Add Section</button>
</div>
<div >
<div class="tab-pane" ng-class="{active : isSectionSelected(section)}" id="{{section.id}}" ng-repeat="section in sections">
</div>
</div>
<div ng-view></div>
</body>
Every object in that array has another array called roots and with another button, named Add Root, I want to push objects(elements) to whatever section I am currently on, depending on the $routeParams id variable.
$scope.addRoot = function(section){
section.roots.push({
id: $scope.counter++,
name: 'Random Root',
});
};
HTML template that is called from the router
<script type="text/ng-template" id="/tpl.html">
<div class="map-container">
<div class="map">
<h2>{{section.name}}</h2>
<h4>{{section.description}}</h4>
<button class="add btn btn-success" ng-click="addRoot(section)">Add Root</button>
<div ng-repeat="root in section.roots" ng-include="'/tpl.html'"></div>
</div>
</div>
</script>
app.config(function ($routeProvider) {
$routeProvider
.when('/section', {
templateUrl: '/tpl.html',
sectionId: '1',
})
.when('/section/:sectionId', {
templateUrl: '/tpl.html',
})
.otherwise({
redirectTo: '/'
});
});