I'm very new to angular and I was trying some things out.
I've created a controller that shows (toggles) a menu. In the menu there are a few li's with some directives. One of them has ng-click="erase()". When clicking it, I would like the element itself to be removed (deleted). It is possible to do that? In jQuery it was, I think: element.remove();
Here is my code:
<div ng-controller="DeathrayMenuController">
<button ng-click="toggleMenu()">Toggle Menu</button>
<ul ng-show="menuState">
<li ng-click="stun()">Stun</li>
<li ng-click="disintegrate()">Disintegrate</li>
<li ng-click="erase()">Erase from history</li>
</ul>
</div>
The ng-click="erase()" should remove the entire li from the ul.
And here is my code:
$scope.erase = function(){
console.log($scope);
};
Hope someone could land me a hand. Many thanks!
To remove elements, you can use the ng-if directive. This will remove the element when the expression is false.
Here's an example:
$scope.erase = function() {
$scope.erased = true;
}
<li ng-click="erase()" ng-if="!erased">Erase from history</li>
In Angular, your JavaScript shouldn't manipulate the DOM. Instead, your JavaScript manipulates the $scope, and the directives manipulate the DOM.
Related
I want to create dynamic ng-reapet and push the array element on click event:
my controler code is
$scope.AddlistItem = function (index) {
$scope.selecttaglist($scope.tag);
};
$scope.selecttaglist = function (tag) {
//var i=$scope.selectedTags.length;
angular.forEach($scope.selectedTags,function(tag,index){
console.log(tag.name);
$scope.selectedTagslist.push(tag);
})
And View Code:
<ul id="boxElement" ><li ng-repeat="tag in selectedTagslist" ng-controller="ItemController" ng-bind="tag.name" ></li></ul>
Html Code
<div class="AddButtn" id="aDD{{item.name}}" ng-controller="ItemController" ng-click="AddlistItem()" ></div>
problem is that when i clicking on link. array element are pushing on all ng-reapet element.i want array will be push only on clicked element container. iam not sure my approach is write or wrong for doing this. i am new in angularjs. anyone can help on this.
If the model for ng-repeat is the same then you need different approach as model drives the view so i.e. you will need more than one
<ul id="boxElement" ><li ng-repeat="tag in selectedTagslist" ng-controller="ItemController" ng-bind="tag.name" ></li></ul>
<ul id="boxElement" ><li ng-repeat="tag in selectedTagslist2" ng-controller="ItemController" ng-bind="tag.name" ></li></ul>
with a copy of the first element - angular.copy otherwise the object will be connected by reference and the effect will be same
hope that makes sense
I have seen that the inline/html events like onclick, mouseover etc are being used less and less and it is advised to register events using Javascript.
I currently have some HTML like:
<ul id="supported-locations">
<li onclick="setLocationId(32);">Mexico</li>
<li onclick="setLocationId(35);">Mongolia</li>
</ul>
Which works fine but I want to now do this without the "onclick" in the HTML but still be able to retrieve the ID number.
The <li> elements are retrieved via AJAX while the user types into an input box it queries the database and retrieve the data without loading the page.
When the user clicks on one of the countries it will run the setLocationId function which just simply sets a hidden HTML form element with the ID of the selected country so I can use that once the form is submitted.
How do you register an event listener for these <li>'s when the countries and their ID's will always be different and changing depending on what the user types into the box?
Use a data attribute to hold the number. On the onclick event, read the attribute on the element that was clicked.
HTML:
<ul id="supported-locations">
<li data-code="32">Mexico</li>
<li data-code="35">Mongolia</li>
</ul>
JavaScript:
$("#supported-locations").on("click", "li", function() {
var li = $(this);
console.log(li.data("code"));
});
Example:
JSFiddle
<ul id="supported-locations">
<li data-id="32">Mexico</li>
<li data-id="35">Mongolia</li>
</ul>
in jQuery
$('#supported-locations').on('click','li',function(){
setLocationId($(this).data('id'));
})
<ul id="supported-locations">
<li data-id="32">Mexico</li>
<li data-id="35">Mongolia</li>
</ul>
jQuery(function(){
$('#supported-locations li').click(function(){
alert($(this).data('id'))
})
})
I recommend giving a class to the dynamically loaded elements, then use jquery .on(http://api.jquery.com/on/) method to register event listeneres to elements belonging to a class, even those that are dinamically loaded..
Then you could just read out the data stored in the element(in the form of data-something attributes).
<ul id="supported-locations>
<li id="32">Mexico</li>
<li id="35">Mongolia</li>
</ul>
//Jquery
$("#supported-locations > li").on('click',function(){
setLocationId($(this).attr('id'));
});
When you register your event, you still have the ability to use this, which is linked to the HTML element.
In other word, you still can do something like that
<li id="YOUR_ID">Mexico</li>
And get the id of the li tag
You can attach an event handler to the li:
<ul id="supported-locations">
<li id="location32">Mexico</li>
<li id="location35">Mongolia</li>
</ul>
$("#supported-locations li").click(function() {
alert($(this).attr("id"));
});
http://jsfiddle.net/puL95/
try this.
$("#supported-locations li").click(function() {
alert("me")
}
I'm trying to make an JS, but since I'm not an expert on that, maybe someone could help me. I was searching for that in Google and in Stack Overflow, but didn't find what I need. I just found onmouseover that change the class in element itself. But I want something different:
I want to make a onmouseover on a tag to change the class closed to open in other element. Example:
Link
<ul class="dropdown closed"><li>Item</li></ul>
Regards,
If you include jQuery:
Add id for your elements:
Link
<ul class="dropdown closed" id="ul1"><li>Item</li></ul>
Javascript:
$("#a1").mouseover(function(){
$("#ul1").addClass("open").removeClass("closed")
})
You can use Link
And JS:
function changeClass() {
document.getElementById("other-element").className = "open";
}
More advanced JSFiddle: http://jsfiddle.net/eRdHJ/1/
<a href="#" onmouseover=$("ul.dropdown").addClass("open").removeClass("closed")>Link</a>
<ul class="dropdown closed"><li>Item</li></ul>
Here is the jsfiddle : http://jsfiddle.net/eRdHJ/2/
This will access the first <ul> on the page. To narrow it down you need to do a getElementById first to get the elements based on tag name from that point. It will then only select the children from that tag with that certain ID-name;
<script>
function changeUl() {
// Get the first found UL, anywhere in the body
document.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
Link
With ID
<script>
function changeUl() {
var wrapper = document.getElementById('wrapper');
wrapper.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
<div id="wrapper">
Link
</div>
You might want to check if there are any found tho. [0] might trigger an undefined/error if there are no <ul> found.
I am new to javascript and especially dojo and I got stuck to, I assume quite simple task, but I just cannot solve it.
Basically what I'm trying to do is the following:
When I click on a listitem I should be sent to another view. I am doing this with:
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="transitionTo('#recommend',1);">Recommend App</li>
Now the div with id=recommend` has got 2 listitems.
<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
<div class="belowTab" style="width: 100%;"> </div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">via Email</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
</div>
</ul>
I want to make both listitems visible if some particular function returns true otherwise hide 2nd listitem and show just 1st.
I want to know the logic and how to approach this idea of integrating an if-statement together with the div
There is a rather unpoorly documented method of creating event hooks as markup which i will demonstrate here. However it would be better to create a function in your codebase and then set it as a dojoProps attribute, e.g. function myonclick() { ... } and <div data-dojo-type="dijit._Widget" data-dojo-props="onClick: myonclick"></div>.
To achieve this, you need to figure out which events the View widget offers. Easist way to do this is to simply open the dojotoolkit-src/dojox/mobile/View.js file - the ones youre looking for are probably onStartView || onBeforeTransitionIn?
Via markup, we now create dojo/method to onBefore.. so that you may manipulate children in your list. You have a stray closing </div> tag by the way.
<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
<div class="belowTab" style="width: 100%;"> </div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">via Email</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
</ul>
<script type="dojo/method" event="onBeforeTransitionIn" args="moveTo, dir, transition, context, method">
// onBeforeTransitionIn(moveTo, dir, transition, context, method):
var listWidget = dijit.byNode(dojo.query("#recommended ul")[0]);
// say you have a function with true/false return, if item should show
dojo.forEach(listWidget.getChildren(), function(Item, idx) {
dojo.style(Item.domNode, {
display: showItem(Item) ? '' : 'none'
});
});
</script>
</div>
I am trying to create a function to change the class on a series of 5 list elements depending on which has been clicked. The goal is to change the style of the element depending on which one is the current element.
I had tried something like this:
function addClass(obj)
{
obj.className="highlight";
}
and then added this to my elements:
onclick="addClass(this);
but this only added the class to the first element in the list and then did not remove the class when a different one was clicked.
My list elements look like this:
<ul id="circularMenu">
<li id="strategy_link"><h3>Strategy</h3></li>
<li id="branding_link" onclick="addClass(this);"><h3>Branding</h3></li>
<li id="marketing_link" onclick="addClass(this);"><h3>Marketing</h3></li>
<li id="media_link" onclick="addClass(this);"><h3>Media</h3></li>
<li id="management_link" onclick="addClass(this);"><h3>Management</h3></li>
</ul>
When an item is clicked the url changes, maybe this could be the way to set up the function to change classes depending on the url? I am very new with javascript any ideas on how to make this work would be greatly appreciated.
The current way I have it coded is to change each item when hovered, but I would like the change to remain until a different item is clicked. It can be viewed here: http://perksconsulting.com/dev/capabilties.php The items I am referring to are the black dots on the left side of the page.
First, you should use the jQuery addClass() method. You don't need to write your own (your addClass() implementation is buggy, by the way).
Try this:
function selectInList(obj)
{
$("#circularMenu").children("a").removeClass("highlight");
$(obj).addClass("highlight");
}
Then:
<ul id="circularMenu">
<li id="strategy_link"><h3>Strategy</h3></li>
<li id="branding_link" onclick="selectInList(this);"><h3>Branding</h3></li>
<li id="marketing_link" onclick="selectInList(this);"><h3>Marketing</h3></li>
<li id="media_link" onclick="selectInList(this);"><h3>Media</h3></li>
<li id="management_link" onclick="selectInList(this);"><h3>Management</h3></li>
</ul>
Or even better, keep your html clean and let jQuery simplify things:
<ul id="circularMenu">
<li id="strategy_link"><h3>Strategy</h3></li>
<li id="branding_link"><h3>Branding</h3></li>
<li id="marketing_link"><h3>Marketing</h3></li>
<li id="media_link"><h3>Media</h3></li>
<li id="management_link"><h3>Management</h3></li>
</ul>
Then, somewhere in your page:
$(document).ready(function()
{
$("#circularMenu").children("a").click(function() { selectInList(this) });
});
Try this out.
function addClass(obj)
{
$(obj).addClass("Highlight");
}