We Keep Coding

AngularJS do not sort in ng-repeat

AngularJS do not sort in ng-repeat.
I did,
<div ng-repeat="list in lists">
<div style="float: left; margin-left: 5px;">
<div id="tasks" >
<h3>{{ list.name }}</h3>
<ul>
<li ng-repeat="card in cards | orderBy:'card.position'" ng-if="list._id == card.list">{{ card.position }}<button ng-click="take(card.position)">HERE</button>{{ $index }}</li>
</ul>
<form ng-submit="addTask(list._id, $index, newTask)">
<input type="text" ng-model="newTask" placeholder="add a new task" required />
</form>
</div>
</div>
</div>
console.log($scope.cards[0]);
And output of the above code is :
Object { _id: "59bc0936c84be51d70f786e7", name: "first", list: "59bbdeae1ebcd215a4b7af62", position: 7200, __v: 0, created: "2017-09-15T17:09:10.813Z", updated: "2017-09-15T17:09:10.813Z" }
https://imgur.com/a/3BL2e
Where could I have made a mistake?

It should be just orderBy:'position'
<li ng-repeat="card in cards | orderBy:'position'" ng-if="list._id == card.list">{{ card.position }}<button ng-click="take(card.position)">HERE</button>{{ $index }}</li>
EDIT
if you want to ordery by multiple fields, put them inside an array like this,
<li ng-repeat="card in cards | orderBy:['position','list']" ng-if="list._id == card.list">{{ card.position }}<button ng-click="take(card.position)">HERE</button>{{ $index }}</li>

fetching data from JSON array in angularJS

From below JSON I want to retrieve all images from imagePath array. If I try to retrieve single image, it is being fetched smoothly. But the difficulty is arising while fetching imagePath array. Help me with the issue.
Thanks
1). JSON
[{
"senderName": "ABC",
"text": "Enjoy",
"imagePath": [
"../img/jellyfish.jpg",
"../img/cat.jpg",
"../img/fatmice.jpg",
"../img/duck.jpg",
"../img/d.jpg"],
"senderImage": "../img/abc.jpg"
}, {
"senderName": "XYZ",
"text": "Enjoy",
"imagePath": [
"../img/jellyfish.jpg",
"../img/cat.jpg",
"../img/d.jpg"],
"senderImage": "../img/abc.jpg"
}, {
"senderName": "PQR",
"text": "Enjoy",
"imagePath": [
"../img/jellyfish.jpg",
"../img/cat.jpg",
"../img/d.jpg"],
"senderImage": "../img/abc.jpg"
}]
2). that is the controller.js file for the above JSON
http.get('../js/postData.json')
.success(function (response) {
$scope.data = response;
console.log(response);
}).error(function (err) {
console.log(err);
})
3). And the corresponding HTML file is :
<div class="list" ng-repeat="user in data">
<a class="item item-avatar">
<img ng-src="{{user.senderImage}}" align="left">
<h4 align="left">
{{user.senderName}}
</h4>
</a>
<p>
{{user.text}}
</p>
<div>
<img ng-src="{{user.imagePath}}">
</div>
</div>

<div class="list" ng-repeat="user in data">
<a class="item item-avatar">
<img ng-src="{{user.senderImage}}" align="left">
<h4 align="left">
{{user.senderName}}
</h4>
</a>
<p>
{{user.text}}
</p>
<div>
<img ng-src="{{image}}" ng-repeat="image in user.imagePath">
</div>
</div>

Try this if you want to load all images:
<img ng-repeat="imagePath in user.imagePath" ng-src="{{imagePath }}">

try to use a nested loop
<img ng-repeat="singleImg in user.imagePath" ng-src="{{singleImg}}">

try this
<div class="list" ng-repeat="user in data">
<a class="item item-avatar">
<img ng-src="{{user.senderImage}}" align="left">
<h4 align="left">
{{user.senderName}}
</h4>
</a>
<p>
{{user.text}}
</p>
<div>
<!--Changes are made here-->
<div ng-repeat="path in user.imagePath">
<img ng-src="{{path}}">
</div>
<!--Changes ends here-->
</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>

Nested ng-repeat with AngularJS

I cannot seem to get out the values I need from a nested ng-repeat in AngularJS.
I have the following data sent from the server:
[{"Your Turn":[{"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0","friendId":"522eec17e4b088a0a939cfdb","friendName":"Michelle","status":"You are waiting for Michelle Miguelamimio Agoramarketomercado to accept your challenge"}]},{"Their Turn":[{"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0","friendId":"522eec17e4b088a0a939cfdb","friendName":"Michelle Miguelamimio Agoramarketomercado","status":"You are waiting for Michelle to accept your challenge"}]}]
And the following template for the HTML:
<div ng-repeat="turn in data">
<p>{{turn}}</p>
<ul class="list-bare list-inline tab-group">
<li ng-repeat="(key, value) in turn" class="tab tab-active txt-upper {{key | lowercase}}">{{key}}</li>
</ul>
<ul class="list-bare list-users clearfix">
<li class="clearfix" ng-repeat="game in turn">
<div class="avatar-container">
<img class="avatar" ng-src="{{baseUrl}}/shobo/user/avatar/{{game.friendId}}" alt="{{game.friendName}}" />
</div>
<div class="list-users-info">
<h3 class="text-cap">{{game.friendName}}</h3>
<p>{{game.status}}</p>
</div>
<div class="list-users-status txt-center" ng-click="acceptChallenge(game.gameToken,game.friendId)">
<div><i class="icon-chevron-right"></i></div>
</div>
</li>
</ul>
</div>
I am not seeing any of the 'game' values being output from the second ng-repeat and am not sure what i am doing wrong?

<li class="clearfix" ng-repeat="game in turn">
should be
<li class="clearfix" ng-repeat="game in value">

need to make some changes in data and html to make require html
$scope.data=[{
"Title":"Your Turn",
"Turn": [{
"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0",
"friendId": "522eec17e4b088a0a939cfdb",
"friendName": "Michelle",
"status": "You are waiting for Michelle Miguelamimio Agoramarketomercado to accept your challenge"
}]
}, {
"Title":"Their Turn",
"Turn": [{
"gameToken": "sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0",
"friendId": "522eec17e4b088a0a939cfdb",
"friendName": "Michelle Miguelamimio Agoramarketomercado",
"status": "You are waiting for Michelle to accept your challenge"
}]
}];
HTML
<div ng-repeat="turn in data">
<ul class="list-bare list-users clearfix">
<h1>{{turn.Title}}</h1>
<li class="clearfix" ng-repeat="game in turn.Turn">
<div class="avatar-container">
<img class="avatar" ng-src="{{baseUrl}}/shobo/user/avatar/{{game.friendId}}" alt="{{game.friendName}}" />
</div>
<div class="list-users-info">
<h3 class="text-cap">{{game.friendName}}</h3>
<p>{{game.status}}</p>
</div>
<div class="list-users-status txt-center" ng-click="acceptChallenge(game.gameToken,game.friendId)">
<div><i class="icon-chevron-right"></i></div>
</div>
</li>
</ul>
</div>
please refer below fiddle
http://jsfiddle.net/U3pVM/1476/