I have two directives to format text of elements.
app.directive("kilometersText", function(){
// writes number as kilometer
})
app.directive("metersText", function(){
// writes number as meter
})
HTML:
<ul>
<li ng-repeat="item in data">
<span kilometers-text="item.length"></span>
</li>
</ul>
I have two buttons that change view to meter or kilometer.
<button type="button"> meter </button>
<button type="button"> kilometer </button>
How can I change directive with these buttons?
Instead of changing the attribute, i suggest to use two spans, one for showing in KMs and other in meters. and then hide them conditionally based on the selected view.
<ul>
<li ng-repeat="item in data">
<span ng-show="item.view == 'kilometer'" kilometers-text="item.length"></span>
<span ng-show="item.view == 'meter'" kilometers-text="item.length"></span>
</li>
</ul>
Related
I have this category:
When I press the drop-down button, it should only drop one type but here it drops 3 types at the same time. Where did I go wrong?
Here is the blade:
#foreach($loai as $l => $type)
<ul style="list-style:none">
<li>
<span style="font-size: 17px">{{$type->type_name}}</span>
<span class="items-sidebar">v</span>
</li>
#foreach($hang as $h)
#if($h->brand_type==1)
<ul class="brand_category">
<li>
{{$h->brand_name}}
</li>
</ul>
#endif
#endforeach
<ul class="type_category" style="display: none"></ul>
</ul>
#endforeach
Here is the drop-down function:
<script type="text/javascript">
$('.items-sidebar').click(function(){
$(this).parents('ul').find('.brand_category',).toggle();
});
$('.items-sidebar').click(function(){
$(this).parents('ul').find('.type_category',).toggle();
});
Do I have problem in the blade or the js function?? Please help..
You are selecting all brand_category of your all parents elements.
and also there is a non necessary comma inside your find method.
try this on
<script type="text/javascript">
$('.items-sidebar').click(function(){
$(this).closest('ul').find('.brand_category').toggle();
});
$('.items-sidebar').click(function(){
$(this).closest('ul').find('.type_category').toggle();
});
</script>
I have created a hamburger menu and there is toggle function for displaying subcategories this toggle function is working fine until i apply filter on them. After searching a category through filter toggle function not working.
this is my html code
<ul class="nav navbar-nav">
<div id="menuToggle" class="sidenav">
<ul id="menu">
<li>
<input class="form-control" type="search" [(ngModel)]="txtToSearch" placeholder="Search"/>
</li>
<li *ngFor="let category of (componentContents.dashboardMenu | dashboardFilter : txtToSearch); let i = index" >
<p class="toggleMenu" (click)="toggleMenu(i,componentContents.dashboardMenu)">{{category.category}}
</p>
<div *ngIf="category.show">
<ul id="{{(category.category).split(' ').join('-')}}" *ngIf="category.subCategory.length > 0">
<li *ngFor="let subCat of category.subCategory">
<a routerLink={{subCat.router}} routerLinkActive="active">
<span class="glyphicon glyphicon-bell" ></span>{{subCat.subcategory}} </a></li>
</ul>
</div>
<hr />
</li>
</ul>
in component.ts im using this code for toggle function
toggleMenu(index, catArry) {
if (catArry[this.prevClicked] && this.prevClicked !== index) {
catArry[this.prevClicked].show = false;
}
catArry[index].show = !catArry[index].show;
this.prevClicked = index;
}
The index variable is applicable only to the current result. So when the filter is applied, the result changes and the index does not correspond to the actual position of element in array.
You can pass the category itself to the toggleMenu(category, catArray) function instead of index and calculate the index in toggleMenu function using catArray.indexOf(category)
I have html something like...
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">arrow_down</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">arrow_down</span>
<li>
<ul>
on ng-click=makeActive(), I want to change the value 'arrow_down' to 'arrow_right' of that particular < li> element only. and if again the same is clicked I want to change it to 'arrow_down'. Rest all < li> will have span text unchanged. How can I do this using angularjs? i.e. by using angular.element? OR is there any other way?
keyboardArrow refers to only one variable. So you have to create two scope variables: keyboardArrow1 and keyboardArrow2
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">{{ keyboardArrow1 }}</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">{{ keyboardArrow2 }}</span>
<li>
<ul>
Update
According to your needs, here is a plunker.
Updated my answer from our discussion in comments.
1) In your controller, define keyboardArrow1 and keyboardArrow2:
$scope.keyboardArrow1 = 'A';
$scope.keyboardArrow1 = 'B';
2) You can now display theses values like this:
<ul>
<li ng-class="{'active': active == keyboardArrow1}" ng-click="makeActive(keyboardArrow1)">
{{keyboardArrow1}}
</li>
<li ng-class="{'active': active == keyboardArrow2}" ng-click="makeActive(keyboardArrow2)">
{{keyboardArrow2}}
</li>
</ul>
Note that I also changed the ng-class condition.
3) When clicking a <li>, call makeActive():
$scope.makeActive = function(arrow) {
$scope.active = arrow;
}
I got an workaround here and need some help. It is a tree of categories. Some categores can be chosen by a checkbox.
I thougt the cleanest way to do that is via direction. On a <li kw-category-node> element put a on('click', function()) handler, which then does the choosing work (add object to data etc.).
So I came up with this HTML
<script type="text/ng-template" id="category_renderer.html">
<div ng-if="true == true" ng-mouseenter="over = true" ng-mouseleave="over = false">
<input type="checkbox"
ng-model="assignedCategories[category.category_id]"
ng-if="category.childs.length == 0"
ng-click="toggleCategory(category)">
</input> {{ category.name }}
<a href ng-if="over" ng-click="categories.remove(category)">
<small> <i class="fa fa-times"></i> Entf </small>
</a>
</div>
<ul class="list-unstyled">
<li ng-repeat="category in category.childs"
ng-include="'category_renderer.html'"
kw-category-node>
</li>
</ul>
</script>
<ul class="list-unstyled" kw-category-tree>
<li ng-repeat="category in categories.tree"
ng-include="'category_renderer.html'"
kw-category-node>
</li>
</ul>
And a directive like that
admin.directive('kwCategoryNode', ['$interval', 'dateFilter', function($interval, dateFilter) {
function link(scope, element, attrs) {
element.find('input').on('click', function() {
alert("wow, what a click!");
});
}
But element.find("input") wont give me that input element. Maybe the DOM is not loaded completly or I'm just in tilt.
Thanks
I have two list items, and i have to show the first item if some condition is met, otherwise i will show the second one.
for example
<li class="login" style="display:block">
</li>
<li class="login" style="display:none">
<a class="btn" href="#" id="sign_up_link" data-modal="#create-account-modal" data-reveal-id="create-account-modal"></a>
</li>
I cannot change id of the list item. I have two option
I can add one more class in list item to differentiate which to show
and which to hide.
or i can put each list item in separate div with some id and based
on that div's id i can show or hide.
which one is good 1) or 2)??
Is there any best option??
$('#submit').click(function() {
$(this).prev('#hideme').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<input type='button' id='hideme' value='hide me'>
<input type='button' id='submit' value='submit'>
</div>
Description: Display or hide the matched elements.
Documentation here
You can use .toggle() to hide/show element by using id as selector make sure you use unique id at all times
$('#clickme').click(function() {
$(this).parent().find('#hideme').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li id="hideme">
hide me
</li>
<li id="clickme" >
<a class="btn" href="#" id="">click me</a>
</li>
</ul>
Hide/show li you should have unique id as always and use proper selector to select the li you want to show or hide