We Keep Coding

How to iterate an object with a specific key in angularjs?

I want to list an item inside a specific key using a filter. Now listing like this.
Sanal
Jin
John
Tim
Jeff
Sam
John
Tim
I want like this using a filterJeffSam
Here is the Fiddle
function testCtrl($scope) {
$scope.items = {"id":"B716","day":8,"di":{"type":"normal","one":[{"name":"Sanal","age":"18"},{"name":"Jin","age":"25"}],"two":[{"name":"Jeff","age":"55"},{"name":"Sam","age":"32"}],"three":[{"name":"John","age":"34"},{"name":"Tim","age":"39"}]}};
}
<div ng-app="" ng-controller="testCtrl">
<ul>
<li ng-repeat="val in items.di">
<ul>
<li ng-repeat="value in val">{{value.name}}</li>
</ul>
</li>
</ul>
</div>

in your ng repeat change it as
<li ng-repeat="value in val | filter: val.name='jeff'">{{value.name}}</li>
I have used name you can use the value that you want ot test

Make newest item on top in To Do List using Angular

I have a problem with my todo list. I want when I input a new item, it appears on top of list items, not below the list items. I have put track by -$index but it doesn't work
index.html snippet
<ul class="unstyled">
<li ng-repeat="todo in todos track by -$index">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
controller.js snippet
app.controller('TodoListController', ['$scope', function($scope) {
$scope.todos = [];
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};
Are there any solution for this ?

Use unshift() to prepend the items to your array instead of push() and remove your track by -$index
Javascript
app.controller('TodoListController', ['$scope', function($scope) {
$scope.todos = [];
$scope.addTodo = function() {
$scope.todos.unshift({text:$scope.todoText, done:false});
$scope.todoText = '';
};
HTML
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>

The solution from #nipeco works fine but it changes the logic for presentation purposes which personally I wouldn't recommend.
I think it's best to push and use the filter orderBy+reverse to have the desired output.
<li ng-repeat="todo in todos | orderBy:'-$index':reverse">
Hope it helps!

Select item from list and send it back to server using Javascript AngularJS

I have a list of items. I want to select them by clicking. Selected item will be sent to server. At a time only one item can be selected. So, for this I need a variable where I can store the item. Please no jQuery. I am looking for simple Javascript AngularJS. Here is my html. After selecting one item, it will automatically go to another list, which I kept in ng-if=false. Suppose, I click on item1 then it will show the list of list1, list2 and list3. Now, let's select list2. Now item1 and list2 will both go to server.
<div ng-if="true"class="items">
<ul ng-if="true">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<ul ng-if="false">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
In my fiddle, if I select one date then it should list of dates, which is given ng-if='false'
fiddle link :- http://jsfiddle.net/abhijitloco/k6jso1u3/

Look
function AppController($scope) {
$scope.selectedItem = [];
$scope.clickItem = function(item) {
$scope.selectedItem.push(item);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="AppController">
{{selectedItem}}
<div class="items">
<ul ng-if="true">
<li ng-click="clickItem('Item1');">Item1</li>
<li ng-click="clickItem('Item2');">Item2</li>
<li ng-click="clickItem('Item3');">Item3</li>
</ul>
<ul ng-repeat="obj in selectedItem">
<li>{{obj}}</li>
</ul>
</div>
</div>

<div class="items">
<ul ng-if="!selectedItem" ng-model="selectedItem">
<li ng-click="selectedItem = item1">Item1</li>
<li ng-click="selectedItem = item2">Item2</li>
<li ng-click="selectedItem = item3">Item3</li>
</ul>
<ul ng-if="selectedItem" ng-model="selectedList">
<li ng-click="selectedList = list1">list1</li>
<li ng-click="selectedList = list2">list2</li>
<li ng-click="selectedList = list3">list3</li>
</ul>
</div>
You have selected item in selectedItem model and selected list in selectedList model.

Assuming that yours lists and items are dynamic I would propose something like the following:
constroller:
$scope.lists = [list1, list2, list2...]
$scope.items = [item1, item2, item3...]
$scope.selectItem = function(index){
$scope.selectedItem = $scope.items[index];
};
$scope.sentToServer = function(index){
$scope.lists[index].push($scope.selectedItem);
//send $scope.lists[index] and $scope.selectedItem;
};
view:
<div ng-if="true" class="items">
<ul ng-if="true">
<li ng-click="selectItem($index)" ng-repeat="item in items>{{item}</li>
</ul>
<ul ng-if="selectedItem">
<li ng-click="sendToServer($index)" ng-repeat="lists in lists>{{'list' + $index}</li>
</ul>
</div>

<div ng-if="true"class="items">
<ul ng-repeat='entry in list1'>
<li ng-click='clickMe(entry.name)'>{{entry.name}}</li>
</ul>
<ul ng-repeat='entry1 in list2' ng-if="secondList">
<li ng-click='sendToserver(entry1.name)'>{{entry1.name}}</li>
</ul>
</div>
contorller.js
$scope.optionsSelected = {};
$scope.clickMe = function(text){
$scope.optionsSelected['first'] = text;
$scope.secondList = true; // show second list
// you can initialize second list here OR reset values before it is sent to sever
}
$scope.sendToserver = function(text){
$scope.optionsSelected['second'] =text;
$scope.textSelected = $scope.optionsSelected;
// $scope.textSelected contains both options you just selected.
}

You can do this with couple of ngClick and ngIf directives. For example:
$scope.showType = 1;
$scope.selected = {};
$scope.selectDate = function(date) {
$scope.showType = 2;
$scope.selected.date = date;
};
$scope.selectTime = function(time) {
$scope.selected.time = time;
$http.post('date/selected', $scope.selected); // post wherever you need
};
where in HTML you would have
<ul class="datepicker text-center" ng-if="showType === 1">
<li ng-click="selectDate(date)" ng-repeat="date in dateValues">{{date | date:'EEE dd'}}</li>
</ul>
<ul class="datepicker text-center" ng-if="showType == 2">
<li ng-click="selectTime(time)" ng-repeat="time in timeValues">{{time}}</li>
</ul>
And here is your code updated:
Demo: http://plnkr.co/edit/SjxbyfboJlkLnOeDBhdn?p=preview

AngularJS ng-repeat array of arrays

Is it possible to use ng-repeat with an array of arrays?
Here's my view:
<div ng-repeat="item in items">
<p>{{item}}</p>
<ul>
<li ng-repeat="i in item.items">{{i}}</li>
</ul>
</div>
Here's my controller:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
});
Here's my Plunker:
http://plnkr.co/edit/b6vRVpUKkhPANNVXkkJL?p=preview
How can I output:
1
2
3
4
5
6
7
8
9

Your problem lies with this line:
<li ng-repeat="i in item.items">{{i}}</li>
item.items is undefined because item is an array.
You should enumerate item instead of item.items:
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<ul>
<li ng-repeat="i in item">{{i}}</li>
</ul>
</div>
</body>
Here's a working Plunk.

You almost aleady have the result. It's just a little mistake in your second ng-repeat.
<div ng-repeat="item in items">
<p>{{item}}</p>
<ul>
<li ng-repeat="i in item">{{i}}</li>
</ul>
</div>
You are already in item in your second ng-repeat you don't need item.items.
There is the updated plunker : http://plnkr.co/edit/aLx05WWzFRVrocmXwr12?p=preview

How to stack <li> into divs using ng-repeat

I am using ng-repeat to iterate over an array to generate <li>. But i want to stack every 2 li into div.
<li ng-repeat="item in items">{{item.name}}</li>
I want the output to be like this:
<ul>
<div>
<li>A</li>
<li>B</li>
</div>
<div>
<li>C</li>
<li>D</li>
</div>
</ul>
How should i achieve this with ng-repeat?
Thanks in advance for any help.

Although it is invalid to put div inside ul but to illustrate. i have made a function to split your array into group of 2 element array contained in wrapper array
Or You can also use splice method
Working Demo 1
angular.module('testApp',[]).controller('testCtrl', function($scope) {
$scope.items=['1','2','3'];
$scope.groupByTwo = function (array)
{
var newarray =[];
index=0;
for(a=0;a<array.length;a++){
if(a==0 || a%2==0){
newarray[index]=[];
newarray[index].push(array[a]);
}else{
newarray[index].push(array[a]);
}
if(a!=0)
index++;
}
return newarray;
}
$scope.items=$scope.groupByTwo($scope.items);
});
div {
background:pink;
border:1px dotted black;
margin-top:15px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<ul>
<div ng-repeat="item in items">
<li ng-repeat="i in item">{{i}}</li>
</div>
</ul>
Working Demo 2
You can also use splice method
angular.module('testApp',[]).controller('testCtrl', function($scope) {
$scope.items=['1','2','3'];
var i,j,temparray=[],chunk = 2;
for (index=0,i=0,j=$scope.items.length; i<j; i+=chunk,index++) {
temparray [index]= $scope.items.slice(i,i+chunk);
}
$scope.items =temparray;
});
div {
background:pink;
border:1px dotted black;
margin-top:15px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<ul>
<div ng-repeat="item in items">
<li ng-repeat="i in item">{{i}}</li>
</div>
</ul>

Apply ng-repeat on ul and li will act as a template which will be generated for each item.
Ex :
<ul ng-repeat="item in items">
<li>{{item.name}}</li>
</ul>
This will result in
<ul>
<li>name1</li>
<li>name2</li>
<li>name2</li>
</ul>
If you have a collection consisting of 10 items , you can split them in multiple collections each of size 2 and then apply ng-repeat with each collection on div to get the output you want.