We Keep Coding

AngularJS - Animating ng-repeat enter one by one

I use angular and angular-animate to animate enter of ng-repeats.
Thats my html
<div class="container" ng-controller="chatController">
<ul ng-repeat="module in CurrentModules" class="timeline">
<li ng-repeat="message in module.ServerMessages" class="timeline-inverted" animate-on-load>
<div class="timeline-panel">
<div class="timeline-body">
<p>{{message}}</p>
</div>
</div>
</li>
</ul>
<div align="center" ng-repeat="answer in module.Answers" animate-on-load>
<div ng-switch on="answer.IsButton">
<div ng-switch-when="true" align="center">
<button ng-click="Answer($event, answer.Value)" class="send-btn">{{answer.Text}}</button>
</div>
<div ng-switch-when="false">
<form>
<input ng-model="answer.Text">
</form>
</div>
</div>
</ul>
</div>
</div>
Note that animate-on-load it's only a directive which allow to stagger animate ng-repeate on page load.
My question - Is it possible to run second ng-repeat after first ng-repeat(and also animations for it) are ended?

Get value from view to controller in angularjs

I m new in angular.Here is my code :
home.html :
<div ng-repeat="data in datab track by $index">
<ul class="list">
<li class="item" ng-click="singlegolf(la)" ng-model="la">{{data.href}}</li>
</ul>
</div>
And i would like in my console log to display the value of {{data.href}} in my console So i try that in my controller :
$scope.singlegolf = function(la){
console.log(la)
}
But this is not working can someone help me pls ?

Adjust your template:
<div ng-repeat="data in datab track by $index">
<ul class="list">
<li class="item" ng-click="singlegolf(data.href)" ng-model="la">{{data.href}}</li>
</ul>
</div>

reorder/sort ng-repeat list dynamically

I working on angularjs. I am trying to reorder the ng-repeat list.
There is list of online users.
Users can receive messages anytime. Whenever user receive the message i update the ui and show the recent message under the name.
I am trying to sort the user list based on the users who receive the recent message. The user who receive the messages should come at the top.
Some codes-
Userlist controller:
$scope.$watch('service.get.userList()', function (values) {
var result = [];
angular.forEach(values, function (value) {
processChatService.registerObserverCallback('lastMessage', function () { //i call this event when user receives the message
$scope.$apply(function () {
value.l = processChatService.get.lastMessage(value.u); //returns the recent message
value.time = processChatService.get.lastMessageTime(value.u); //returns time
});
});
value.l = processChatService.get.lastMessage(value.u); //it returns null if user havent recieve message
value.time = processChatService.get.lastMessageTime(value.u);
result.push(value);
});
$scope.users = result;
});
html:
<div ng-repeat="user in users | filter:search"> <a class="list-group-item" ng-click="click(user)" ng-href="">
<div class="row">
<div class="col-xs-2">
<div class="thumb-userlist-sm pull-left mr">
<img class="img-circle" ng-src="{{ user.p }}" alt="...">
</div>
</div>
<div class="col-xs-8">
<div class="message-sender">{{ user.n }}</div>
<div class="message-preview">{{user.l}}</div>
</div>
<div class="col-xs-2">
<div class="pull-right">{{user.time}}</div>
</div>
</div>
</a>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-10">
<div class="line-separator"></div>
</div>
</div>
</div>

What you'll probably want to do is order the ng-repeat:
<div ng-repeat="user in users | filter:search | orderBy: 'time'">
This will order the users on the time property of each user. It's also possible to reverse the sort order with -time.
For more information on the orderBy filter, check the angular documentation.

We can do this by using orderBy.Now it depends upon the requirement.In your case it is time.
<div ng-repeat="user in users | filter:search | orderby:'time'"> <a class="list-group-item" ng-click="click(user)" ng-href="">
<div class="row">
<div class="col-xs-2">
<div class="thumb-userlist-sm pull-left mr">
<img class="img-circle" ng-src="{{ user.p }}" alt="...">
</div>
</div>
<div class="col-xs-8">
<div class="message-sender">{{ user.n }}</div>
<div class="message-preview">{{user.l}}</div>
</div>
<div class="col-xs-2">
<div class="pull-right">{{user.time}}</div>
</div>
</div>
</a>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-10">
<div class="line-separator"></div>
</div>
</div>
</div>

How do I append a variable value to an event call in ng-repeat?

I have the following code in the html. In the ng-click="inbox.showView('in: {{category|lowercase}}')" the double braces is not working because it is being considered as a string and not as a variable.
How do I ensure I have the category value in the ng-click event?
<li ng-repeat="category in inbox.categories track by $index">
<a href="#">
<div class="left-row" ng-click="inbox.showView('in: {{category|lowercase}}')" target="_self">
<div class="leftcolumn1"><span class="glyphicon glyphicon-user"></span></div>
<div class="leftcolumn2">{{category}}</div>
<div class="leftcolumn3 email-time" ng-bind="inbox.messageCounts.socialCount"></div>
</div>
</a>
</li>

In the controller:
$scope.inbox = {
categories: ['Name', 'Test'],
showView : function(variable) {
**console.log(variable);**
}
};
In the HTML given the parameter for showView function is object,, hence pass like the below inbox.showView({'in': (category | lowercase) })
<li ng-repeat="category in inbox.categories track by $index">
<a href="#">
<div class="left-row" ng-click="inbox.showView({'in': (category | lowercase) })" target="_self">
<div class="leftcolumn1"><span class="glyphicon glyphicon-user"></span></div>
<div class="leftcolumn2">{{category}}</div>
<div class="leftcolumn3 email-time" ng-bind="inbox.messageCounts.socialCount"></div>
</div>
</a>
</li>

AngularJS data binding checkboxes to object if checked

I have a JSON object which I am repeating with ng-repeat, the keys are strings, and the values are an array. I am listing each of the values as a checkbox. I would like to create a second object which contains a list of only the checkboxes that are checked. I want to preserve the structure of the object with keys and values.
I'm unsure how to bind this to a model properly so that the structure is preserved.
http://jsfiddle.net/NDFc2/3/
This is my HTML
<h3 >Dynamic data binding in AngularJS</h3>
<div ng-app ng-controller="Controller" class="container">
<h4>Inputs</h4>
<ul ng-repeat="(parent, values) in inputs">
<span>{{parent}} : </span>
<li ng-repeat="value in values"><label>{{value}}
<input type="checkbox" ng-model="output[parent]" ng-checked="output[parent]" value="value" >
</input></label>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>
{{key}} : {{output[key]}}
</li>
</ul>
</div>
and my JS
function Controller($scope) {
$scope.output = {};
$scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
}
Is there some simple way to do this? I have the feeling that I'm missing something minor and this will all work nicely.

My examples have your angular logic in the recommended syntax (non-global). There were also several issues with your markup that I have corrected.
In this example, ng-model="x" is a placeholder that I don't use, but ng-model must be present or an error is thrown. I am using ng-change to handle the link between the checkboxes and $scope.outputs.
Live demo here (click).
Markup:
<div ng-app="myApp" ng-controller="myCtrl">
<h3 >Dynamic data binding AngularJS</h3>
<h4>Inputs</h4>
<ul>
<li ng-repeat="(typeKey, typeVal) in inputs">
<span>{{typeKey}} : </span>
<ul>
<li ng-repeat="value in typeVal">
<label>{{value}}
<input
type="checkbox"
ng-model="x"
ng-change="setOutput(typeKey, $index, value)"
>
</label>
</li>
</ul>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>{{key}} : {{outputs[key]}}</li>
</ul>
</div>
JavaScript:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.outputs = {};
$scope.inputs = {
'category': ['one','two','three'],
'color':['blue','green']
};
$scope.setOutput = function(typeKey, $index, value) {
$scope.outputs[typeKey] = $scope.outputs[typeKey] || [];
$scope.outputs[typeKey][$index] = value;
};
});
Another Solution
Live demo here (click).
First, I used ng-init to dynamically add the first-level properties from inputs to outputs. Then you just needed to set your ng-model and ng-checked properties to the correct location in outputs.
Markup:
<div ng-app="myApp" ng-controller="myCtrl">
<h3 >Dynamic data binding AngularJS</h3>
<h4>Inputs</h4>
<ul>
<li
ng-repeat="(typeKey, typeVal) in inputs"
ng-init="outputs[typeKey] = outputs[typeKey] || {}">
<span>{{typeKey}} : </span>
<ul>
<li ng-repeat="value in typeVal">
<label>{{value}}
<input
type="checkbox"
ng-model="outputs[typeKey][value]"
ng-checked="outputs[typeKey][value]"
value="outputs[typeKey][value]"
>
</label>
</li>
</ul>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>{{key}} : {{outputs[key]}}</li>
</ul>
</div>
JavaScript:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.outputs = {};
$scope.inputs = {
'category': ['one','two','three'],
'color':['blue','green']
};
});

You need to bind to the value for the parent, as checkboxes don't work like that. Here's an example:
<h3 >Dynamic data binding in AngularJS</h3>
<div ng-app ng-controller="Controller" class="container">
<h4>Inputs</h4>
<ul ng-repeat="(parent, values) in inputs">
<span>{{parent}} : </span>
<li ng-repeat="value in values"><label>{{value}}
<input type="checkbox" ng-model="output[parent][value]" ng+checked="output[parent][value]" value="value" >
</input></label>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>
{{key}} : {{output[key]}}
</li>
</ul>
</div>
And in the controller create the keys beforehand
function Controller($scope) {
$scope.output = { 'category': {}, color: {} };
$scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
}
jsfiddle: http://jsfiddle.net/5eeVc/

Have a look at this plunk, i have handled two different scenarios. Just sharing it as a knowledge article
Plunk
<h3>First Scenario <small>Handling JSON source </small></h3>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4>Available options</h4>
<div ng-repeat="item in itemList">
<mark>{{item.name}}</mark>
<input type="checkbox" ng-model="modelContainer[$index].checked" />
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4 class="text-success">Selected options</h4>
<ul>
<li ng-repeat="item in modelContainer | filter: {checked:true}">
{{item.item.name}} X
</li>
</ul>
</div>
</div>
</div>
<br>
<p class="text-danger">itemList</p>
<code>{{itemList}}</code>
<br>
<br>
<p class="text-danger">modelContainer</p>
<code>{{modelContainer}}</code>
<hr>
<h3>Second Scenario <small>Handling map Source </small></h3>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4>Available options</h4>
<div ng-repeat="item in Maplist">
<mark>{{item}}</mark>
<input type="checkbox" ng-model="modelContainer1[$index].checked" />
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4 class="text-success">Selected options</h4>
<ul>
<li ng-repeat="item in modelContainer1 | filter: {checked:true}">
{{item.name}} X
</li>`enter code here`
</ul>
</div>
</div>
</div>