I have a module called app.It got four tabs (Home,Library,Data).
In my Library tab (2nd tab), I have my organisation data displayed as a list. initially, the main organisation name is displayed (level 1), on clicking any of the list item, it drills down and shows the next level of organisation data.(level 2) and it goes on.
CompanyName //level 1
Administartion //level 2
Operations //level 3
EmployeeName //level 4
I want to display the organisation hierarchy on top of the page like this. (The below is when I reach the 4th level in page)
CompanyName | Administartion | Operations | EmployeeName
My idea was to declare an empty array initially, and push the organisation name into it on each clicks, and later displaying it using an ng-repeat.
//Initially in code
$rootScope.breadCrumb = [];
//on each click
$rootScope.breadCrumbRef.push({"level":$scope.level,"name":orgName});
//html code.
<ol class="breadcrumb" ng-repeat="l in breadCrumb">
<li><a ng-href="">{{l.name}} </a></li>
</ol>
Please note:
I am using twitter bootstrap for html, in bootstrap, a breadCrumb can be attained like given below.
<ol class="breadcrumb">
<li>CompanyName</li>
<li>Administartion</li>
<li>Operations </li>
<li class="active">Data</li>
</ol>
I did not get the expected results, but it appeared as given below
CompanyName
Administartion
Operations
EmployeeName
Any idea..?
Thanks in advance.
You have the ng-repeat on the ol. You want to place it on the li. You're creating a new ordered list for each item in the array. Like this:
<ol class="breadcrumb" >
<li ng-repeat="breadCrumb in breadCrumbs">{{breadCrumb}} </li>
</ol>
Related
I am using angularJS ui-sortable directive to sort my array. The code looks like in example:
<ul ui-sortable ng-model="items">
<li ng-repeat="item in items">{{ item }}</li>
</ul>
Is there a way to split the list in a view into two even columns?
For example now I have my list looking like:
1
2
3
4
The thing i want to achieve is to split the list in two columns to look like:
1|3
2|4
In this case I want to start filling the second column only when the first column is full (contains more than two elements).
Update: Thanks for those who answered my question and gave me useful ideas. I have made the solution for this case and if someone gets to the same situation this might be useful:
1) In your controller split the main array into two arrays of equal lenght
2) in your view make two ui-sortable lists (each list for a separate column). Each of the ui-sortable list must have set the ui-sortable options allowing to drag and drop items from first list to the second list and vice versa.
3) define the ui-sortable options in your controller. Options must contain the connectWith property (allowing to drag and drop items between separate lists) and the logic to keep lists the same length. Mine looks like that:
$scope.sortableOptions = {
stop: function () {
// if the first column contains more than 30 elements, move last element to the top of the next column
if ($scope.tpPart1.length > $scope.halfListLength) {
$scope.tpPart2.unshift($scope.tpPart1[$scope.halfListLength]);
$scope.tpPart1.splice($scope.halfListLength, 1);
}
// if the second column contains more than 30 elements, move the first element to the end of the first column
if($scope.tpPart2.length > $scope.halfListLength) {
$scope.tpPart1.push($scope.tpPart2[0]);
$scope.tpPart2.splice(0, 1);
}
},
connectWith: ".list-group"
};
So that's pretty much it. Hope somebody finds this helpful.
I've made a service to split an array by cols or rows.
You can use a double ng-repeat to iterate the subset
<ul ng-repeat="col in main.itemsCols">
<li ng-repeat="item in col">{{ item.text }}</li>
</ul>
Working example here
You could just use two ng-repeats and limit the first one to the first half of the list and the second one the the second half
<ul ui-sortable class="left-column">
<li ng-repeat="item in items | limitTo:items.length/2">{{ item }}</li>
</ul>
<ul ui-sortable class="right-column">
<li ng-repeat="item in items | limitTo:items.length/2:items.length/2">{{ item }}</li>
</ul>
Note: you'd have to take the ceiling of items.length/2 in your controller to get this working for arrays of odd length but that's the basic idea
I have an array with districts and arrays with cities inside each of them. I've created list via bg-repeat:
<div ng-repeat="district in districts | filter:search:startsWith" class="district">
<h4 class="district-name">{{ district.district }}</h4>
Some info
<ul class="district-cities">
<li ng-repeat="city in district.cities">
{{ city }}
</li>
</ul>
</div>
Everything works fine when we are clicking on letter from which the region starts, but when we are clicking on some letter, that isn't first letter of district, but at the same time it is presence in one of the cities, then filtering works incorrect.
Here is working Plnkr. When you try to click letters A, B or G everything is fine, but once you click letter Z, then appears two districts that do not start on letter Z, but do contain cities which contains letter Z.
Sorry for, may be, elementary question, but how to fix this issue?
Try this:
<input id="q" type="text" ng-model="search.district " />
and
<ul search-list=".letter" model="search.district">
<li class="letter" ng-repeat="letter in alphabet.letter">{{ letter }}</li>
</ul>
it'll mean the filter only acts on the district property of your object. Otherwise angular will look at all properties.
UPDATE:
For your second list you'll want to use the search.district as the main search item like this:
<div ng-repeat="district in districts | filter:search.district:startsWith" class="district">
I've updated the Plunk to include a second list in blue which is searched like this.
I have a <ul> of elements in html with roughly the structure as follows:
<ul id="ElementList">
<li> Some element 1 </li>
<li> Some element 2 </li>
<li> Some element 3 </li>
<li ng-repeat="element in someArray" ng-show = "SomeCondition"> element </li>
</ul>
I want to hide the Element list completely if there is no element after element 3 and show the complete list if there is any element seen after element 3. The array used for ng-repeat and the condition for ng-show above are something that I cannot make use of or rather understand how it works (comes from a third party) and hence can play around only with what is rendered. How can I do this?
So, you want the list to be shown only if the array of elements is not empty, and if SomeCondition is true:
<ul id="ElementList" ng-show="someArray.length != 0 && SomeCondition">
I have created some "Basic Pages" like page 1, page 2, page 3 etc in Drupal 7. I have also created a view named "categories" based on this assigned it in a block. Now I want to show the list of categories exactly as below:
<h2 class="sidebar1">Main Menu</h2>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
Please help me in this regard. Should I create any view tpl file for this or I need to modify the templates. If so, how can I modify the template files?
Please find the attached screen shot of the view.
Under the Format label, you have to click "Unformatted list" and then select "HTML list." This way, the view's results will be displayed with the desired HTML format.
Under the Fields label, edit "Content: title" and make sure you check the checkbox "Link to content". This way the name of the basic page will automatically be rendered as a link to the page it represents.
Hope it helps.
I have a number of li items which I want evenly distributed across 3 different columns. So I need the 1st third of the list items to be shown in the first ul, the next third in the 2nd ul etc.
Right know my approach is somewhat static:
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.development | slice:0:10">
{{ skill.name }}
</li>
</ul>
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.development | slice:10:21">
{{ skill.name }}
</li>
</ul>
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.development | slice:21:32">
{{ skill.name }}
</li>
</ul>
I create the 3 rows in my template and then I created a custom filter that slices the list so I can obtain the first 11 elements, the next 11 elements and so forth. Problem is that the number of rows in each ul is not assigned dynamically like so:
Math.ceil(skills.development.length / 3)
So if I have more elements I will have to manually change the number of rows. Filtering is an issue as well. Imagine that I search for a word with 5 matches in first column and one in the 2nd column. Then I would have completely uneven column sizes. The length should be recalculated dynamically when I filter the list.
Ideally not only the number of rows in a column is calculated dynamically, but also the number of columns. So if there are more than say 15 elements it should render three columns, but if there is only 10 elements 2 columns will look better (as there is only 5 elements in each). And if there are less than 5 elements only one column will be rendered.
I figured that I should either try to solve it in the view or make some sort of helper function similar to the custom filter function I already wrote. But how might I do that?
Create a columns array with start and end values for each column and use a nested repeater to loop through all the data and render properly.
<ul ng-repeat="column in columns" class="small-12 medium-4 columns">
<li ng-repeat="skill in skills | slice:column.start:column.end">
{{ skill }}
</li>
</ul>
Full plnkr here: http://plnkr.co/edit/AMWLvB045UJmNamp8vdz?p=preview