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);
}
Related
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'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
In my application i have array of colors and i want to create a list of colors with checkbox.
var app = angular.module('app',[]);
app.controller('mainCtrl',function($scope){
$scope.colors = ['red','blue','green','yellow'];
});
so i create an ng-repeat to create a list :
<body ng-controller="mainCtrl">
<ul>
<li ng-repeat="c in colors">
<input type="checkbox" ng ng-true-value="{{c}}" ng-false-value=""/> {{c}}
</li>
</ul>
</body>
now i need to bind ng-model of each checkbox to something like f.tags.red or f.tags.blue so i change the code to something like this :
<li ng-repeat="c in colors">
<input type="checkbox" ng-model="f.col.{{c}}" ng-true-value="{{c}}" ng-false-value=""/> {{c}}
</li>
but this make my app broken.so ho to fix this for ng-model and ng-true-value also i create this jsbin .
thanks
There were a few things going wrong here. In general, inside properties of Angular that takes expressions (check the docs), you should not use {{x}}, but rather just x itself. So, you'r ng-model should not be f.col.{{c}} but rather f.col.blue and f.col.red etc. Now, in javascript, doing a.b and a['b'] is identical, so in this case, since c is a string, the correct model is f.col[c]. The same goes for the true-value, it should also simply be c.
Lastly, to get the example working, you need to actually create the objects maintaining your model (in this case $scope.f.col. Working example can be seen here: http://jsbin.com/citupepa/1/edit
Here is working demo for selection of colors:
jsbin
<ul>
<li ng-repeat="c in colors">
<input type="checkbox" ng-model="f.col[c]" ng-true-value="true" ng-false-value="false"/> {{c}}
</li>
Selected Colors: {{f.col}}
I have a Kendo UI Mobile Listview
<ul data-role="listview" data-bind="source: customers" data-template="customer-template"/>
Now I want to access the property of the customer which is an array and iterate it inside the template. something like this
<script type="text/x-kendo-template" id="customer-template">
<div>#:CustomerName#</div>
<div>
<div>Orders</div>
#for(x=0;x<customers.orders.lentgh(); x++){#
<div>customers.orders.[x].OrderId</div>
#}#
</div>
Obviously, this lines throws an error
#for(x=0;x<customers.orders.lentgh(); x++){#
<div>customers.orders.[x].OrderId</div>
#}#
Is it possible to access the datasource of the listview inside the template? any ideas?
You don't need the data source of the list view. The template is given an item from this data source which you can use instead.
There are a few other problems:
If orders is a JavaScript array you should get its length via the length field. It is not a method.
The length is misspelled.
To proper way to get an item from a JavaScript array is orders[x] not orders.[x].
To output a value in a Kendo UI Template you should use the #: # expression.
Your list view is created from a <ul> but the template is a <div>. You cannot nest a <div> inside an <ul>. You should use a <li> instead.
The <ul> element cannot be self-closed. You need to fully close it - <ul></ul>.
I have addressed all those problems in the code snippet below:
<ul data-role="listview" data-bind="source: customers" data-template="customer-template"></ul>
<script type="text/x-kendo-template" id="customer-template">
<li>
<div>#:CustomerName#</div>
<div>Orders</div>
#for(var x=0; x < orders.length; x++){#
<div># orders[x].OrderId #</div>
#}#
</li>
</script>
Also here is a live demo: http://jsbin.com/aHExUWu/1/edit