I want to get my ng-repeat to be ordered by rank, how would I write the expression?
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="(key, value) in cars | orderBy: cars[key].rank ">
{{cars[key].longName}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.cars = {
"BTC" : {
"longName" : "Bitcoin",
"rank" : 1
},
"BCH" : {
"longName" : "Bitcoin Cash",
"rank" : 3
},
"ETH" : {
"longName" : "Ethereum",
"rank" : 2
},
"ETC" : {
"longName" : "Ethereum Classic",
"rank" : 15
},
"IOTA" : {
"longName" : "IOTA",
"rank" : 4
},
"XRP" : {
"longName" : "Ripple",
"rank" : 6
},
"XVG" : {
"longName" : "Verge",
"rank" : 5
}
};
});
</script>
Order by can only be applied to arrays and not objects. You must convert your object to an array or create your own filter : https://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/
Related
I am trying to fetch the long_name from the below JSON data using angular js but unable to fetch.
CODE:
{
"results" : [
{
"address_components" : [
{
"long_name" : "700109",
"short_name" : "700109",
"types" : [ "postal_code" ]
},
{
"long_name" : "Kolkata",
"short_name" : "Kolkata",
"types" : [ "locality", "political" ]
},
{
"long_name" : "West Bengal",
"short_name" : "WB",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "India",
"short_name" : "IN",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Kolkata, West Bengal 700109, India",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 22.6902065,
"lng" : 88.38850289999999
},
"southwest" : {
"lat" : 22.6715168,
"lng" : 88.35748319999999
}
},
"location" : {
"lat" : 22.6808046,
"lng" : 88.37577829999999
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 22.6902065,
"lng" : 88.38850289999999
},
"southwest" : {
"lat" : 22.6715168,
"lng" : 88.35748319999999
}
}
},
"place_id" : "ChIJ1-N4xFyc-DkRzfGq4MWZa1g",
"types" : [ "postal_code" ]
}
],
"status" : "OK"
}
I am using the following code to solve this problem but it does not show anything
CODE:
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="record in records">
{{record.long_name}}
</li>
</ul>
</div>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",function($scope,$http){
$http.get("https://maps.googleapis.com/maps/api/geocode/json?address=700109&key=AIzaSyDNK47S-6brePCvm1Hr6L7RFWAZvsngj1E")
// $http.get("https://www.styfash.com/post/data.json")
.then(function(result){
$scope.records=result.data.results.address_components;
});
});
</script>
Whenever I am trying to using $scope.records=result.data.results and printing {{record.address_components}} it is working properly but whenever I am trying to use the above-mentioned code it is not showing anything on the screen.
I am new to angular js.
Try
$scope.records=result.data.results[0].address_components;
What you should understand is, result.data.results is an array. Therefore you should traverse through that to obtain the child records. Check the code sample below.
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http) {
$http.get("https://maps.googleapis.com/maps/api/geocode/json?address=700109&key=AIzaSyDNK47S-6brePCvm1Hr6L7RFWAZvsngj1E")
.then(function(result){
$scope.records=result.data.results;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<ul>
<div ng-repeat="record in records">
<li ng-repeat="address in record.address_components">
{{address.long_name}}
</li>
</div>
</ul>
</div>
if you just need the first record, change this line in your code
$scope.records=result.data.results.address_components;
to this
$scope.records=result.data.results[0].address_components;
I have a JSON which has the property prizes which in some cases is like this:
"prize" : {
"Firstyear" : {
"first" : 3000,
"second" : 2000,
"total" : 5000
},
"Secondyear" : {
"first" : 3000,
"second" : 2000,
"total" : 5000
},
"Thirdyear" : {
"first" : 3000,
"second" : 2000,
"total" : 5000
},
"total" : 15000
},
but in some cases, it's like this:
"prize" : {
"first" : 4000,
"second" : 3000,
"third" : 2000,
"total" : 9000
},
How do I ng-repeat over these?
You cannot do ng-repeat over Object unless you want to get the key and value of an object. I guess you need the following.
DEMO
var uniqcApp = angular.module('uniqueApp',[]);
uniqcApp.controller('testController', function ($scope){
$scope.data = {"prize" : {
"first" : 4000,
"second" : 3000,
"third" : 2000,
"total" : 9000
}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="uniqueApp">
<div class="row" ng-controller="testController">
<table>
<tr ng-repeat="(key, value) in data.prize">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</table>
</div>
</body>
I am using ng-repeat for list of options.In that list I have ID and DESCRIPCION,when select one option am appending ID and DESCRIPCION to ng-model like as Object.In controller part need to ceperate ID and DESCRIPCION.I used below code but getting undefined in alert when select one option.
http://jsfiddle.net/KN9xx/1237/
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<div ng-app="myapp" ng-controller="FirstCtrl">
<select class="form-control selectpicker" data-live-search="true" ng-model="subappData" ng-change="getSubApplicationDetails(subappData)" id="subapplicationid" style="height: 21px;width: 300px;-moz-margin-start: 132px;margin-left: 138px;margin-top: 2px;-moz-margun-start: 132px;">
<option value="">Select</option>
<option ng-repeat='subapp in subapplicationList | filter:query' data-select-watcher data-last="{{$last}}" value = "{{subapp}}"> {{subapp.ID}} - {{subapp.DESCRIPCION}} </option>
</select>
</div>
controller.js:
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.subapplicationList = [
{"ID" : 9 ,"DESCRIPCION" : "a" },
{"ID" : 1 ,"DESCRIPCION" : "b" },
{"ID" : 2 ,"DESCRIPCION" : "c" },
{"ID" : 3 ,"DESCRIPCION" : "d" },
{"ID" : 4 ,"DESCRIPCION" : "e" },
{"ID" : 5 ,"DESCRIPCION" : "f" },
{"ID" : 6 ,"DESCRIPCION" : "g" },
{"ID" : 7 ,"DESCRIPCION" : "h" },
{"ID" : 8 ,"DESCRIPCION" : "i" }
];
$scope.getSubApplicationDetails = function(subappData) {
alert(JSON.stringify(subappData));
};
});
myapp.directive('selectWatcher', function ($timeout) {
return {
link: function (scope, element, attr) {
var last = attr.last;
if (last === "true") {
$timeout(function () {
$(element).parent().selectpicker('val', 1);
$(element).parent().selectpicker('refresh');
});
}
}
};
});
Try like this
$scope.getSubApplicationDetails = function(subappData) {
var object = JSON.parse(subappData)
console.log(object.ID);
};
The BSON data list contains very unneeded values as shown below. The problem am I having is returning an array subset from Mongo so that I could display it in a template using Meteor.
Mongo stores the data as such:
meteor:PRIMARY> db.ga_spreadsheet.find().pretty()
{
"_id" : "7YLifh9C6Gp8HPCTm",
"spreadsheet" : "NBATEST",
"header" : null,
"cells" : {
"1" : {
"1" : {
"row" : "1",
"col" : "1",
"value" : "name"
},
"2" : {
"row" : "1",
"col" : "2",
"value" : "position"
},
"3" : {
"row" : "1",
"col" : "3",
"value" : "salary"
& client/view.js does the pull request
GASpreadsheet = new Mongo.Collection('GASpreadsheet');
if (Meteor.isClient) {
Meteor.call("spreadsheet/fetch","1kdRtyhrvXN1aEf35NwtA8pzHfjc9-lNwV76CE_Zr_g");
spreadsheetData = GASpreadsheet.findOne({spreadsheet: 'NBATEST'})
Template.nba.helpers({
'player': function(){
var currentUserId = Meteor.userId();
return GASpreadsheet.find({ createdBy: currentUserId },
{ sort: {score: -1, name: 1} });
},
cellState: function(x, y) {
if(screenArray[x][y] === 1){
return 'live';
}
else {
return 'dead';
}
},
'selectedClass': function(){
var playerId = this._id;
var selectedPlayer = Session.get('selectedPlayer');
if(playerId == selectedPlayer){
return "selected"
}
},
'selectedPlayer': function(){
var selectedPlayer = Session.get('selectedPlayer');
return GASpreadsheet.findOne({ _id: selectedPlayer });
}
});
}
view/main.html
<template name="nba">
<div class="gridWrapper">
{{#each row in rows}}
<div class="row">
{{#let rowIndex=#index}}
{{#each cell in row}}
<div class="cell {{cellState rowIndex #index}}">{{this}}</div>
{{/each}}
{{/let}}
</div>
{{/each}}
</div>
</template>
i am using directive concept in angularjs to display selected node value for tree view using click event function in angularjs.below is my sample code
Tree.html:
<div
data-angular-treeview="true"
data-tree-model="roleList"
data-node-id="roleId"
data-node-label="roleName"
data-node-children="children"
data-ng-click="selectNode(roleList[1])"
data-node-children="children">
</div>
treeviewcontroller.js:
$scope.roleList1 = [
{ "roleName" : "User", "roleId" : "role1", "children" : [
{ "roleName" : "subUser1", "roleId" : "role11", "children" : [] },
{ "roleName" : "subUser2", "roleId" : "role12", "children" : [
{ "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
{ "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
{ "roleName" : "Admin", "roleId" : "role2", "children" : [] },
{ "roleName" : "Guest", "roleId" : "role3", "children" : [] }
];
Treeview.js:
scope.selectNode = function(val)
{
alert(val.roleName);
}
output:
user
subuser1
subuser1-1
Admin
subadmin1
from this output in alert place 'Admin' will be dispalyed by click on Admin node.but i want to display dynamically selected node value in click event function.please suggest me how to do this.
Thanks
In order to dynamically select node of the tree I did following:
Let's say you want to select first (top, [0]) element of your tree.
so first add data-tree-id="myTreeId" to your HTML:
<div
data-angular-treeview="true"
data-tree-model="roleList"
data-node-id="roleId"
data-node-label="roleName"
data-node-children="children"
data-ng-click="selectNode(roleList[1])"
data-node-children="children"
data-tree-id="myTreeId">
</div>
than in Controller:
$scope.roleList1[0].selected = "selected";
$scope.myTreeId.currentNode = $scope.roleList1[0];
In Tree.html :
Add line :
data-tree-id="mytree"
Modify data-ng-click event :
data-ng-click="selectNode(mytree.currentNode.roleName)"
In Treeview.js :
scope.selectNode = function(val) { alert(val); }