I stumpled upon this post about how to reverse the display of an array, which is working fine when I try to do it. angular ng-repeat in reverse
However...then itmes I'm listing are editable and when I'm reversing the array the $index is not being reversed so when I edit the 1 item listed the edit happens in another item that holds the correct index.
So how do I make sure that my $index is reversed as well?
So the code looks like this
<form action="" method="post" autocomplete="off" ng-controller="itemCtrl">
<input type="text" name="createitem" ng-model="item" />
<button ng-click="addItem(item)">Add item</button>
<ul>
<li ng-repeat="item in items | reverse">
<h2>{{item.title}}</h2>
</li>
</ul>
</form>
var itemApp = angular.module('itemApp', []);
itemApp.filter('reverse', function() {
return function(items) {
return items.slice().reverse();
};
});
itemApp.controller('itemCtrl', function ($scope) {
$scope.items = [];
$scope.addItem = function(item){
$scope.items.push({
title: item
});
};
Here's what I'm using.
You just need to subtract the array length by the current $index:
{{myArray.length - $index}}
Related
I have the following string;
$scope.Array="5678,9876,0988"
I am displaying it in my html as follows:
<li ng-repeat="ArrayItem in Array.split(',')">
<input type="checkbox" >
{{Zip}}
</li>
this displays all the string items separately along with a check box. I would like to know how to select multiple items from the list on the UI, and on the press of delete, delete these items from Array.
e.g. check 5678, 9876, and click Delete. The Array would now only have 0988.
angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
$scope.toDelete = {};
$scope.Array="0988,9876,0988";
$scope.delete = function(){
$scope.temp = $scope.Array.split(',');
for(var prop in $scope.toDelete){
if($scope.toDelete[prop])
$scope.temp[prop] = undefined;
}
$scope.toDelete = {};
$scope.Array = $scope.temp.filter(function(x){ return x !== undefined; }).join(',');
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<ul>
<li ng-if='Array' ng-repeat="ArrayItem in Array.split(',') track by $index">
<input type="checkbox" ng-model='toDelete[$index]'>{{ArrayItem}}
</li>
</ul>
Array: {{Array | json}}
<br>
<input type='button' value='Delete' ng-click='delete()'/>
</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'm new to AngularJS and have problem with removing certain element in a nested custom directive with ng-repeat. Here is my plunker
I have such structure of nested directives:
<button ng-click="mc.addCat()">Add Category</button>
<category ng-repeat="cat in mc.main.categories">
<ul class="first-level">
{{ $index +1 }}. Category
<br>
<input type="text" ng-model="mc.main.categories[$index].name">
<button ng-click="cc.removeCat($index)">Del Category</button>
<button ng-click="cc.addItem()">Add Item</button>
<item ng-repeat="item in cc.cat.items track by item.id">
<li class="second-level">
{{ $parent.$index +1 }}.{{ $index +1 }}
<input type="text" ng-model="mc.main.categories[$parent.$index].items[item.id].name">
<button ng-click="ic.removeItem(item)">del</button>
</li>
</item>
</ul>
</category>
Adding and removing categories works as I need and the parent model updates.
But when I enter something in the item field, and then remove it, this item remains in the parent model.
I think my issue in nested scopes, could you tell me what am I doing wrong?
Thanks!
the delete function in directive should call a method to update the main model....i have edited the plunker and forked the edit....
`
$scope.$on('updateItems',function(event,index,pindex){
console.log(index);
console.log(pindex);
var sti = ""+index+"";
delete vm.main.categories[pindex].items[sti];
});
`
here is the plunker link plunker
From what i understand from your code is, your new item is being added and you are entering some information which is updating your parent model....
<input type="text" ng-model="mc.main.categories[$parent.$index].items[item.id].name">
While deleting the items, you are deleting the copy and the original object.
$scope.$on('delItem', function(event, data){
var items = vm.cat.items;
items.splice(items.indexOf(data), 1);
});
All the below function in category seems to be not working..
vm.cat = {
items: [{
id: 0,
name: ''
}]
};
vm.itemId = 0;
vm.addItem = function() {
vm.itemId = vm.itemId + 1;
var item = {
id: vm.itemId,
name: ''
};
vm.cat.items.push(item);
};
$scope.$on('delItem', function(event, data) {
var items = vm.cat.items;
items.splice(items.indexOf(data), 1);
});
I am using ng-repeat to create an array of items (a list), I would like to have an id against each item to be it's position in the array.
JS FIDDLE DEMO HERE: http://jsfiddle.net/m62Ez/15/
Please have a look at the following, looks like the ng-model="item.id" is never assign. Any suggestions much appreciated.
HTML
<div ng-controller="MainCtrl">
<button ng-click="addItem()">Add Item</button>
<ul>
<li ng-repeat="item in items">
<input type="hidden" ng-model="item.id" ng-value="{{$index}}" />
<input type="text" ng-model="item.name" />
</li>
</ul>
<hr />
<button ng-click="saveAll()">Save All</button>
</div>
JS
var app = angular.module("app", []);
app.controller("MainCtrl", function ($scope) {
$scope.items = [];
$scope.addItem = function () {
$scope.items.push({});
}
$scope.saveAll = function () {
console.log($scope.items); // item's do not have id's
}
});
The hidden field isn't useful. If you want your objects to have an ID, then generate them with an ID:
$scope.addItem = function () {
$scope.items.push({id: $scope.items.length});
}
Updated jsfiddle: http://jsfiddle.net/K7DgE/
I'm pretty new in angularjs and I have no idea how do this.
<div class="userData" ng-repeat="user in users">
<div class="float"
<img ng-click="deleteUser($event)" src="myurl">
</div>
<div class="userDiv"
<input type="checkbox" ng-model="user.active" ng-click="handleUserActive()">
<input type="text" ng-model="user.text">
</div>
</div>
I need remove a item when the user click the img.
My model is:
$scope.users = [
{active: true, text: text}
]
Just do:
<img ng-click="deleteUser($index)" src="myurl">
And the method:
$scope.deleteUser = function(index) {
$scope.users.splice(index, 1)
}
What tymeJV said, however, you want to pass the object as the parameter rather than the index like this:
<img ng-click="deleteUser(user)" src="myurl">
$scope.deleteUser = function(user) {
var index = $scope.users.indexOf(user);
$scope.users.splice(index, 1)
}
The reason why is the index can change if you do an orderBy on the ng-repeat.
See an example here: http://jsfiddle.net/6a5zT/