I'm listing a json file using angular, like this:
html:
<li ng-repeat="task in tasks">
<h1>{{task.title}}</h1>
<small>{{task.date}}</small>
<p>{{task.details}}</p>
<button ng-click="details($event)" data-title="{{task.title}}" data-date="{{task.date}}" data-details="{{task.details}}"></button>
</li>
js:
$scope.details = function(obj){
var title = obj.target.getAttribute('data-title'),
date = obj.target.getAttribute('data-date');
...
}
I pass all content via data-attributes, when I click on <button> it calls the ng-click and I access all data-attributes via pure javascript and create a <div> to wrap those contents. This way is working just fine, but is there an easier way to get those values via angular?
Much simpler and proper angular way, yes just pass task though the ng-click function expression and access it from your handler and say goodbye to DOM access from the controller (which is anyways bad) and data attributes:-
<li ng-repeat="task in tasks">
<h1>{{task.title}}</h1>
<small>{{task.date}}</small>
<p>{{task.details}}</p>
<button ng-click="details(task)"></button>
</li>
and
$scope.details = function(task){
console.log(task);
//console.log(this.task);
}
Plnkr
Related
i would like to use templates for a NetBanking app.
Therefore i constructed a basic service to get Objects filled with some Names and IBAN (unique key for banking transactions) in my service.js:
.factory('templateData', function(){
var savedTemplates = [
{name:"Adam Müller", iban:"AT29100020003000",img:"adam"},
{name:"Ben Streicher",iban:"AT34900080007000",img:"ben"},
{name:"Max Krossmann",iban:"AT23400050006000",img:"max"}
];
var getTemplates = function(){
return savedTemplates;
};
return {
getTemplates:getTemplates,
};
})
The controller saves this data via the .getTemplates() statement in a variable and the template view accesses mentioned variable with ng-repeat.
template.hmtl:
<div class="list" ng-model="chosentemplate">
<a
class="item item-thumbnail-left"
ng-repeat="template in Templatelist">
<img src="img/{{template.img}}.jpg">
<h2><b>{{template.name}}</b></h2>
<button
style="float: right;"
class="button button-positive pull-right"
ng-click="onTemplateClick(chosentemplate.iban)"
ui-sref="tab.transactions">Vorlage auswählen</button>
<p ><b>IBAN</b> {{template.iban}}</p>
</a>
Now, I'd like to save the chosen object in the service to use it later when filling it into the transactions form.
I'm struggling to access the used data from ng-repeat, when the button is clicked.
Some weeks ago i've done something quite similar, but just one child element of the object. I could access it with the equivalent to chosentemplate.name.
I would be very grateful for any suggestions!
You are iterating the Templatelist with the template variable.
So, simply use :
ng-click="onTemplateClick(template.iban)"
I'm using the ui-tree in angularjs. For binding I use a method which gives me the child elements:
<div ui-tree="treeOptions">
<ol ng-init="children=getChildren(website.id, '0')" ng-model="children" ui-tree-nodes>
<li ng-repeat="node in children" data-collapsed="node.isCollapsed" ui-tree-node ng-include="'nodeTemplate.html'" ng-cloak></li>
</ol>
</div>
With ng-init I initialize the children array for further usage. This code works, but ng-init is not reevaluated when data changes. So dynamically adding a new item is not possible. Is there a way of setting a local variable in HTML similar to ng-init that gets refreshed automatically?
What easy way to insert html item to exists template HTML in angularjs?
For example there is template generated in PHP:
<div id="block">
<!-- Insert here template from Angularjs-->
<div class="item"></div>
<div class="item"></div>
</div>
I can Use Jquery like as:
$('#block').prepend('<div class="item"></div>');
How I can same in Angularjs?
You can use jquery to add HTML but you'll need to compile it first using
var compiledHTML = $compile(html)($scope);
and then pass it on to jquery's method
$('#block').prepend(compiledHTML);
But as #cerad mentioned definitely this is not the best way.
You should use angular's data binding, you can also treat is as a template engine.
eg:
your html code is this
<ul>
<li ng-repeat="msg in allMsgs">{{msg}}</li>
</ul>
your controller code is this
app.controller($scope){
$scope.allMsgs = [];
// i dont know socket.io well, so this part may not work :)
// and it's better to separate it to a service and use $rootScope.$apply()
soceket.on('msg',function(msg){
$scope.$apply(function(){
$scope.allMsgs.push(msg);
});
});
}
Note you need to use $apply in order to make the data binding work when data is
changed by events that angular doesn't control.
Some useful links
a blog about angular socket-io
$apply doc
I am following the tutorial on Lynda.com for AngularJS essential training.
Part of my index file looks like:
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<ul class="nav nav-pills">
<li role="presentation" ng-class="destinationsActive">Destinations</li>
<li role="presentation" ng-class="flightsActive">Flights</li>
<li role="presentation" ng-class="reservationsActive">Reservations</li>
</ul>
<div ng-view>
</div>
<p>{{ flightsActive }}</p>
</div>
Now when I click on any link it should fire the setActive function defined in the AppCtrl which looks like this:
$scope.setActive = function (type) {
$scope.destinationsActive = '';
$scope.flightsActive = '';
$scope.reservationsActive = '';
$scope[type + 'Active'] = 'active';
};
Now the problem is very simple. The function should take the type for example 'destinations' and append 'Active' to it and set the scope variable 'destinationsActive' to active which in turn should be reflected in the ng-class directive of the li tags and the link should be active.
I have tried to insert alert('hello'); after setting it active which fires up. Now this means that the function is indeed being called. But when I do alert($scope.destinationsActive); it gives me a blank alert whereas it should give me active as the value.
I am not following with the exercise files and I feel that maybe because the tutorial is relatively older, there might be changes in the framework. I have already encountered such problems with the tutorial. Anyway, what is it that I am doing wrong?
In your ng-click directives you are passing the argument as a variable, not a string.
ng-click="setActive(destinations)"
Will pass in the value of the $scope.destinations, which is undefined. Try passing in a string i.e.:
ng-click="setActive('destinations')"
Note the single quotes
You need to put parenthesis around the parameters in your html javascript function call.
Destinations
Here is a working example: JSFiddle
I would recommend you to think of the model binding in more semantic way. For example use a checkbox instead of link and set the checkbox value as ng-model to a scope variable instead.
<input type="checkbox" ng-model="destinations">
<input type="checkbox" ng-model="flights">
<input type="checkbox" ng-model="reservations">
and thereafter use the model to reflect the rest of the changes (this is the answer to the original question, you have to specify a classname and a condition in brackets:
<li ng-class="{ destinationsActive: destinations }">
Pass argument as string in ng-click.
working code : http://jsfiddle.net/Virbhadrasinh/cLsLfkjm/
I need to get to dom element that created in ng repeat i have this code and i dont understand why i cant get the element.
<div></div>
<ul>
<li ng-repeat="data in data"">
{{data}}
</li>
</ul>
<script>
var thirdListItem = $('ul').find('li').first().text();
$('div').html(thirdListItem);
</script>
here is plunker http://plnkr.co/edit/91S2esBo0uHzQHyEBuvj?p=preview
Not a nice idea to use AngularJS and jQuery together. Btw, try this quick&dirty solution:
$(function(){
var thirdListItem = $('ul').find('li').first().text();
$('div').html(thirdListItem);
});
http://plnkr.co/edit/HDvZwPp1rFeoxVYb0qGd?p=preview
As somebody already said, the best practice would be to create a custom directive.
For your particular case try this solution:
It uses ng-init to pass the index value of the list item to a function which uses that index to return the DOM element using jQuery. Output is console.
http://plnkr.co/edit/XJnBzIyQoSJf9YKE0953?p=preview
<ul>
<li ng-repeat="data in data" ng-init="find($index +1)">
{{data}}
</li>
</ul>
$scope.find = function(i){
$ele= $('li:nth-child(' + i +')');
console.log($ele);
}