Angularjs : Access nested json array values using ng-repeat with groupBy - angularjs

I've nested json array in which i need to group with some values. I'm not able to fetch nested tag for grouping.
$scope.sampleTest = [{"id": "1", "cash": {"amount":"4000"}},
{"id": "2", "cash": {"amount":"2000"}}]
If i'm grouping 'id' its working and if i'm grouping 'cash.amount' its not working
Can anyone help me to solve this issue?

You can do,
<div ng-repeat="record in sampleTest | filter: {cash:{amount:'2000'}}:true ">
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.sampleTest = [{"id": "1", "cash": {"amount":"4000"}},
{"id": "2", "cash": {"amount":"2000"}},
{"id": "3", "cash": {"amount":"2000"}}];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<div ng-repeat="record in sampleTest | filter: {cash:{amount:'2000'}}:true ">
<ul>
<li >{{ record}}</li>
</ul>
</div>
</body>
</html>

Related

ng-click not working in ng-repeat

NG-click not firing in ng -repeat. I want to use ngclick to display only the specific element details.
<body ng-app="mainApp" >
<div ng-app = "mainApp" class="container" ng-controller="TableFilterController">
<table ng-app = "mainApp" class ="table table-hover">
<tr><th>Id</th><th>Name</th><th>Age</th><th>Role</th></tr>
<tr ng-repeat="p in details "><td>{{ $index + 1 }}</td><td><a ng-click="clickMe()">{{p.name}}</a></td><td>{{p.age}}</td><td>{{p.mass}}</td></tr>
</table>
</div>
</body>
js:
var mainApp= angular.module("mainApp", []);
mainApp.controller('TableFilterController', function($scope) {
$scope.clickMe = function(){
alert("hey");
}
There can be different-2 scenarios:
1. Remove Duplicate ng-app.
2.Use This Once,this will test if controller is calling onload or not
mainApp.controller('TableFilterController', function($scope) {
alert("its Calling");
$scope.clickMe = function(){
alert("hey");
}
Check you have mentioned controller name in routing.
4.Check your file's code is loading in browser.
Check these points on first priority otherwise try to create plunker so that everyone can look into your code.
Please try to remove ng-app in table tag, ng-app for application, only once you can use it.
Also no need for a tag for click event because a tag has href attribute.
Use button tag or any other tag rather than a tag.
Try this below code. There were some issues in your code.
The isseus in the code were as below
Script you provided was incomplete. There were some missing }, ] and )
Remove ng-app which are not required. It will not create any issues but its not a good practice to include the same ng-app attribute multiple times.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="mainApp">
<div class="container" ng-controller="TableFilterController">
<table class="table table-hover">
<tr><th>Id</th><th>Name</th><th>Age</th><th>Role</th></tr>
<tr ng-repeat="p in details "><td>{{ $index + 1 }}</td><td><a ng-click="clickMe()">{{p.name}}</a></td><td>{{p.age}}</td><td>{{p.mass}}</td></tr>
</table>
</div>
<script src="../lib/angular.js"></script>
<script>
var mainApp= angular.module("mainApp", []);
mainApp.controller('TableFilterController', function ($scope) {
$scope.details = [{ "name": "A1", "age": 10, "mass": 20, },
{ "name": "A2", "age": 15, "mass": 30, },
{ "name": "A3", "age": 20, "mass": 40, },
{ "name": "A4", "age": 30, "mass": 60, }]
$scope.clickMe = function () {
alert("hey");
}
});
</script>

Angular Filter Shows Not Matched Values When Search On List Of Elements

actually I have been trying to implement some custom drop-down search functionality in my application. And this drop-down contains a number of versions in this format. Please don't consider this question as duplicate as I asking this question after going through existing related solutions and no solution fix my issue. I big thanks in advance.
16.2(2)
16.2(1.11)
16.1(0)
12.7(3)M1
12.7(4)M1
12.7(5)M1
15.9(3)
15.7(3)M1
15.7(4)M1
15.7(5)M1
And the user can search for his required values using an input box to select. like
Now I am trying a search for values matched with 12 then as part of the response I am getting 16 matches values also but it should not happen as per my client requirement so only 12 matches related values should display. See these below images for unmatched responses with irrespective search values
And this is my codebase please
script file :
var appOne = angular.module('appOne', ['ngRoute']);
appOne.controller('controllerOne', function ($scope) {
$scope.versionLi = [["217233", "16.2(2)", "0", "Class"], ["217220", "16.2(1.11)", "1", "Class"], ["212675", "16.1(0)", "2", "Class"], ["228973", "12.7(3)M1", "4", "Class"], ["228973", "12.7(4)M1", "4", "Class"], ["228973", "12.7(5)M1", "4", "Class"], ["231350", "15.9(3)", "3", "Class"], ["228973", "15.7(3)M1", "4", "Class"], ["228973", "15.7(4)M1", "4", "Class"], ["228973", "15.7(5)M1", "4", "Class"]];
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-filter-filter-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script type="text/javascript" src="myApp.js"></script>
</head>
<body ng-app="appOne">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults" ng-controller="controllerOne">
<tr ng-repeat="friend in versionLi | filter : searchText ">
<td>{{friend[1]}}</td>
</tr>
</table>
</body>
</html>
To start with you are trying to search in whole object of the array for the given index hence it returns the object for whatever the property matches the given search field.
For example when you search for 12 it also returns 16.1(0) as its object contains '12' in 0th index value --> ["212675", "16.1(0)", "2", "Class"] => "212675"
As your intention is to display only the 1st elements of your given source array, I've put them in a separate array to make the filter work only on the required values like below.
$scope.toFilterList = [];
for (var i = 0; i < $scope.versionLi.length; i++) {
var obj = $scope.versionLi[i];
//console.log(obj[1]);
$scope.toFilterList.push(obj[1]);
}
Now we can simply apply search filter on the displayed values array.Please find the working demo below.
var appOne = angular.module('appOne', ['ngRoute']);
appOne.controller('controllerOne', function($scope) {
$scope.versionLi = [
["217233", "16.2(2)", "0", "Class"],
["217220", "16.2(1.11)", "1", "Class"],
["212675", "16.1(0)", "2", "Class"],
["228973", "12.7(3)M1", "4", "Class"],
["228973", "12.7(4)M1", "4", "Class"],
["228973", "12.7(5)M1", "4", "Class"],
["231350", "15.9(3)", "3", "Class"],
["228973", "15.7(3)M1", "4", "Class"],
["228973", "15.7(4)M1", "4", "Class"],
["228973", "15.7(5)M1", "4", "Class"]
];
$scope.diffArray = [
{"id":"217233", "value":"16.2(2)","index":"0", "type":"Class"},
{"id":"217220", "value":"12.2(1.11)","index": "1","type":"Class"},
{"id":"212675", "value":"16.9(0)","index": "2", "type":"Class"}
];
$scope.toFilterList = [];
for (var i = 0; i < $scope.versionLi.length; i++) {
var obj = $scope.versionLi[i];
//console.log(obj[1]);
$scope.toFilterList.push(obj[1]);
}
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-filter-filter-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script type="text/javascript" src="myApp.js"></script>
</head>
<body ng-app="appOne">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults" ng-controller="controllerOne">
<tr ng-repeat="friend in toFilterList | filter : searchText ">
<td>{{friend}}</td>
</tr>
</table>
<label>Search 2 for key value object array <input ng-model="search.value"></label>
<table id="searchTextResults" ng-controller="controllerOne">
<tr ng-repeat="obj in diffArray | filter : search ">
<td>{{obj.value}}</td>
</tr>
</table>
</body>
</html>
Thanks, Angular_10 to suppose the very close answer to my requirement and as we did discuss on personal chatroom on this like even we change response structure with key and value format if even any dropdown value having search value as a part it then those values also showing as part of that search filter. So, after spending some time on stackoverflow I got a fix for what I am exactly looking for
This code snippet -
var appOne = angular.module('appOne', ['ngRoute']);
appOne.controller('controllerOne', function($scope) {
$scope.versionLi = [
["217233", "16.2(2)", "0", "Class"],
["217220", "16.2(1.11)", "1", "Class"],
["212675", "16.1(0)", "2", "Class"],
["228973", "12.7(3)M1", "4", "Class"],
["228973", "12.7(4)M1", "4", "Class"],
["228973", "12.7(5)M1", "4", "Class"],
["231350", "15.9(3)", "3", "Class"],
["228973", "15.7(3)M1", "4", "Class"],
["228973", "15.7(4)M1", "4", "Class"],
["228973", "15.7(5)M1", "4", "Class"]
];
$scope.startsWith = function (actual, expected) {
var lowerStr = (actual + "").toLowerCase();
return lowerStr.indexOf(expected.toLowerCase()) === 0;
}
$scope.diffArray = [
{"id":"217233", "value":"16.12(2)","index":"0", "type":"Class"},
{"id":"217220", "value":"12.2(1.11)","index": "1","type":"Class"},
{"id":"212675", "value":"16.9(0)","index": "2", "type":"Class"}
];
$scope.toFilterList = [];
for (var i = 0; i < $scope.versionLi.length; i++) {
var obj = $scope.versionLi[i];
//console.log(obj[1]);
$scope.toFilterList.push(obj[1]);
}
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-filter-filter-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script type="text/javascript" src="myApp.js"></script>
</head>
<body ng-app="appOne">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults" ng-controller="controllerOne">
<tr ng-repeat="friend in toFilterList | filter : searchText ">
<td>{{friend}}</td>
</tr>
</table>
<label>Search 2 for key value object array <input ng-model="search.value"></label>
<table id="searchTextResults" ng-controller="controllerOne">
<tr ng-repeat="obj in diffArray | filter : search:startsWith ">
<td>{{obj.value}}</td>
</tr>
</table>
</body>
</html>

AngularJS Dropdown Multiselect Options not binding

I am using AngularJS Dropdown Multiselect - http://dotansimha.github.io/angularjs-dropdown-multiselect/
the problem I am facing is the option attribute that is not binding to the model
<div style="margin: 5%" checkboxes="true"
ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
For example:
if model is :
$scope.example1model = [];
$scope.example1data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"} ];
Issue:
the binding for options doesn't seems to work correctly as I am getting only Id(s) rest is working fine, if I check David and John ,the options binding with $scope.example1model show only the id not the label
i.e : [{"id":1},{"id":2}
but what I want is
[
{
"id": 1,
"label": "David"
},
{
"id": 2,
"label": "John"
}
]
Set externalIdProp as empty string
$scope.extraSettings = {
externalIdProp: ''
};
html
<div ng-dropdown-multiselect="" options="options" selected-model="myModel" extra-settings="extraSettings"></div>
Works for me, I'm using ^1.11.8
you can try like below.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app ="sortApp" ng-controller ="mainController">
<!DOCTYPE html>
<html lang="eng-US">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<select class="multiselect" data-placeholder="Select Products"
ng-model="example1model" ng-options="item as item.label for item in example1data"
multiple="multiple" multiselect-dropdown >
</select>
{{example1model}}
<div style="margin: 5%" checkboxes="true" ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
</body>
</html>
</div>
<script>
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.example1model = [];
$scope.example1data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"} ];
});
</script>
</body>
</html>

Appropriate AngularJS1.X espression for specific JSON

Is posibble in AngularJS1.X by using ng-repeat directive, for JSON named weeks_and_days:
`[{
"week_nr": "1",
"day_nr": "1,2,3,4,5,6,7"
}, {
"week_nr": "2",
"day_nr": "8,9,10,11,12,13,14"
}, {
"week_nr": "3",
"day_nr": "15,16,17,18,19,20,21"
}, {
"week_nr": "4",
"day_nr": "22,23,24,25,26,27,28"
}, {
"week_nr": "5",
"day_nr": "29,30,31"
}]`
to get each and every day_nr, so for example, for week_nr: 1 I would sepearte results as: "1" "2" "3" "4" "5" "6" "7" ?
If it is possible how should the AngularJS {{expression}} look in this case? If it's not possible, how would have to be this JSON constructed to achive my goal?
For the request in comment I'm attaching the html files, index.html:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Calendar </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<!-- Include the core AngularJS library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<!-- Include the AngularJS routing library -->
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="CalendarApp">
<div ng-view>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/DaysController.js"></script>
<!-- Services -->
<script src="js/services/days.js"></script>
</body>
</html>`
and the view test.html:
`<div ng-repeat="week in weeks_and_days">
<p> {{week}} </p>
</div> `
var app = angular.module('myApp',[]);
app.controller('ctrl', function($scope){
$scope.weeks_and_days = [{
"week_nr": "1",
"day_nr": "1,2,3,4,5,6,7"
}, {
"week_nr": "2",
"day_nr": "8,9,10,11,12,13,14"
}, {
"week_nr": "3",
"day_nr": "15,16,17,18,19,20,21"
}, {
"week_nr": "4",
"day_nr": "22,23,24,25,26,27,28"
}, {
"week_nr": "5",
"day_nr": "29,30,31"
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<div ng-repeat="week in weeks_and_days">
<p>Week : {{week.week_nr}}</p> <p>Days : {{week.day_nr}}</p>
<div>
</body>
I hope this will help.Please add the necessory style. Always consider grouping multiple data as arrays, and pass numbers as numbers itself, It will increase the performance. Thanks #Manikandan for the reference code. Thank you.
var app = angular.module('myApp',[]);
app.controller('ctrl', function($scope){
$scope.weeks_and_days = [{
"week_nr": 1,
"day_nr": [1,2,3,4,5,6,7]
}, {
"week_nr": 2,
"day_nr": [8,9,10,11,12,13,14]
}, {
"week_nr": 3,
"day_nr": [15,16,17,18,19,20,21]
}, {
"week_nr": 4,
"day_nr": [22,23,24,25,26,27,28]
}, {
"week_nr": 5,
"day_nr": [29,30,31]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<table>
<tr><th>Week</th><th>Day</th></tr>
<tr ng-repeat="week in weeks_and_days"><td>{{week.week_nr}}</td><td ng-repeat="day in week.day_nr">{{day}} </td></tr>
</table>
</body>
Considering your JSON is in your scope. Can't you use an ng-repeat to repeat through your weeks_and_days like:
ng-repeat="week in weeks_and_days"
Then use the following expressions to display them:
{{week.week_nr}}
{{week.day_nr}}

Cannot show information from DRF page using AngularJS

Here are the codes that I've written:
DRF Page [ http://localhost:8000/index/info/?format=json ]
[{"id": 1, "name": "Michel", "city": "Florida", "country": "United States"}, {"id": 2, "name": "Shuvo", "city": "London", "country": "United Kingdom"}]
2.html [this is my second attempt]
<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<script src="2.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in info">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
</body>
</html>
2.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("http://localhost:8000/index/info/?format=json")
.success(function(response) {
$scope.info = response;
});
});
My 2.html page shows NOTHING. It's completely blank. What am I doing wrong? :(
since django and angular use the same notation to display variables, you will have to use the verbatim tags for using {{}} as angular tags. Otherwise they will be treated as django tags.
I suspect it's something to do with the format of the data being returned in
$http.get("http://localhost:8000/index/info/?format=json")
What are you seeing in the console when http.get runs?
Here's a plunkr showing it working with your data
http://plnkr.co/edit/x0OtVbsnSMk3mdhRFEkc

Resources