How can i loop html element in angularJS?
html:
<ul id="list">
<li>AngularJS</li>
<li>jQuery</li>
<li>Backbone</li>
<li>ExtJS</li>
</ul>
In jQuery:
var array = [];
$('ul#list li').each(function(index,value){
array.push($(value).text());
});
How can i get the same result in angularJS?
Try this.
<ul ng-init="list = ['AngularJS','jQuery',Backbone','ExtJS']" ng-repeat="item in list">
<li>{{item}}</li>
</ul>
In Angular you would tackle this problem the other way around.
Define your array in your controller:
$scope.array = ['AngularJS', 'JQuery', 'Backbone', 'ExtJS'];
and in your html use the ng-repeat directive:
<ul>
<li ng-repeat="a in array">{{a}}</li>
</ul>
and now you can access the array in JS via $scope.array
Related
for(var i=0;i<a.length;i++){
$scope.inputs=[
{name:a[i],value:b[i]}
];
}
this is my Javascript code i want to know how to write (ng-repeat) for arrays
Your JS is invalid, will produce length 1 array. Replace it with this:
$scope.inputs=[];
for(var i=0;i<a.length;i++){// be sure that a.length >=b.length
$scope.inputs.push({name:a[i],value:b[i]}); // push will add new entry to your inputs array.
}
The you can use it in ng-repeat:
<div ng-repeat="entry in inputs"> {{entry.name}} : {{entry.value}} </div>
You don't write loops surrounding a global variable. You leave the variable by itself and then you call the loop. Later you just use the global variable in the html code.
I made a cool snippet so you understand how it works:
angular.module('demo', [])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.inputs = [];
var a = ['name1', 'name2', 'name3'];
var b = [133,233,456];
//this code has to be called somewhere else. It might be part of a function.
for(var i=0; i < a.length; i++){
$scope.inputs.push( {name:a[i],value:b[i]} );
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="item in inputs">
<input ng-model="item.name"/>
</li>
</ul>
<!--This is only to display the content of $scope.inputs -->
<pre>{{inputs | json}}</pre>
</div>
</div>
If you have an array in your controller, with a scope that is visible in your html
angular.module('appName').controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.inputs = [
key: value,
...
];
}
In your html you would use ng-repeat within the scope of the controller. You can use the ng-repeat directive on several different html tags, such as <ul> lists, a div, select dropdowns and more
<div ng-controller="mainCtrl">
<ul>
<li ng-repeat="item in inputs">{{item.key}} <!-- Prints 'value' --></li>
</ul>
</div>
In Angular I wanted to bind $index to controller. How can I send $index value in to my controller. Here is my html code.
<body>
<div class="container">
<div class="row row-content" ng-controller="demoController as demoCtrl">
<ul>
<li ng-repeat="val in demoCtrl.list" >Hello {{$index}}</li>
</ul>
</div>
</div>
Here is my controller code
var app = angular.module('confusionApp',[])
app.controller('demoController', function(){
var list = [1,2,3,4,5];
this.list = list;
var array = ['abc','def','ghi','jkl','mno']
this.array = array
console.log(this.array[index]);
});
I need to use ng-modal in HTML and bind that value to some variable in my controller.
Based on the selection of index, it should check in array and respective array should have to print.
Can any of you please help
To get your current iteration position in your controller you have define a function.
So your html code like this.
<body>
<div class="container">
<div class="row row-content" ng-controller="demoController as demoCtrl">
<ul>
<li ng-repeat="val in demoCtrl.list" ng-click="dispArray($index)">Hello {{$index}}</li>
</ul>
</div>
</div>
And your controller code
var app = angular.module('confusionApp',[])
app.controller('demoController', function($scope){
$scope.dispArray = function(index){
// console.log(index);
// your code
}
});
Depending on what you're trying to accomplish you might be better served creating a custom iterator.
function makeIterator(array){
var nextIndex = 0;
return {
next: function(){
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{done: true};
}
}
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators
Angular is going to iterate over everything in the list when you use ngRepeat. If you're trying to track which list item a user clicks then you'll just add that in there using $index.
<li ng-repeat="val in demoCtrl.list" >
<span ng-click="demoCtrl.userClicked($index)"> Hello {{$index}}</span>
</li>
If you're just trying to print the data in each item, ng-repeat is already iterating everything for you.
<li ng-repeat="val in demoCtrl.list" >
<span ng-click="demoCtrl.userClicked($index)"> Hello {{val}}</span>
</li>
It all depends on what you're trying to do.
i dont konw what u want to do. if u want to use event. you can pass $index to your controller function like:
<li ng-repeat="val in demoCtrl.list" ng-click="getIndex($index)">Hello {{$index}}
$scope.getIndex = function($index) {
console.log($index)
}
hope to help u.
I have an Ionic list in my app and im populating it dynamically with elements. Im trying also to attach a tap/click listener that will just alert the DOM list element.
Im trying to avoid using jQuery and do it just by angular. I tried the following and i dont understand why the click functions dont fire.
HTML
<ul class="list">
<li class="item" data-ng-repeat="c in contacts()" data-ng-click="selectedElem(selection)">
{{ c.displayName }}
</li>
</ul>
The relevant controller code:
$scope.selectedElem = function(selection){
alert(selection);
};
Replace data-ng-click="selectedElem(selection)" with data-ng-click="selectedElem(c)" , c is the that specific item. As you are doing c in contacts().
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.contacts = function(){
return [{displayName:"abc"}, {displayName:"def"}, {displayName:"igh"}];
}
$scope.selectedElem = function(selection){
alert(selection);
};
});
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
<body ng-app="myApp" ng-controller="MainCtrl">
<ul>
<li data-ng-repeat="c in contacts()" data-ng-click="selectedElem(c)">
{{ c.displayName }}
</li>
</ul>
</body>
I have the following data structure declared in my controller:
$scope.tree = {
label:"A",
parent:{
label:"B",
parent:{
label:"C"
}
}
};
What i would like to end up with is:
<ul>
<li>C
<ul>
<li>B
<ul>
<li>A</li>
</ul>
</li>
</ul>
</li>
<ul>
I've tried various ways of doing this including external templates, custom directives etc and I just can't seem to get it to work.
Any thoughts?
In the other answer that you linked to inside the comments, we use the ng-repeat directive to create a new scope for the template.
Perhaps, you could mimic this behavior with your data by wrapping your parent property inside an array [...]:
controller
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.tree = {
label:"A",
parent:{
label:"B",
parent:{
label:"C"
}
}
};
});
html
<ul ng-repeat="field in [tree]" ng-include="'tree.html'"></ul>
template
<li>
<div>{{field.label}} {{[field.parent]}}</div>
<ul ng-if="field" ng-repeat="field in [field.parent]" ng-include="'tree.html'"></ul>
</li>
Here is the link to the plunker: http://plnkr.co/edit/7shibX0leK1TXVl5kfPc?p=preview
A better solution would be to create your own ng-include and pass your child object to it.
What I mean is, say I have this HTML:
<ul ng-controller="ContactsCtrl">
<li ng-repeat="contact in contacts">
<div class="name">{{name}}</div>
<div class="email">{{email}}</div>
</li>
</ul>
This works just fine if I initialize the contacts collection from JavaScript:
app.controller('ContactsCtrl', ['$scope', function($scope) {
$scope.contacts = [
{ name: 'Dan', email: 'dan#example.com' },
{ name: 'Bob', email: 'bob#example.com' }
];
}]);
What if, instead, I want to initialize the contents of the collection from the HTML side? Something like:
<ul ng-controller="ContactsCtrl" ng-model="contacts">
<li>
<div class="name" ng-bind="name">Dan</div>
<div class="email" ng-bind="email">dan#example.com</div>
</li>
<li>
<div class="name" ng-bind="name">Bob</div>
<div class="email" ng-bind="email">bob#example.com</div>
</li>
</ul>
And then from JavaScript I would have $scope.contacts initialized based on what I have in the HTML.
Is this possible?
you can do a ng-init="" in your html to initialize a variable or sets of variables but that doesn't seem to be quite what your asking. Why would you want your second example? What are you trying to do with it?
Rather use jQuery and parse HTML DOM, if You have at least... 500 records, other way is 'copy and paste' - it will be faster.
Here is short info 'how it works'
Tutorial