I need to merge and display in a single row for particular data which has same id. I'm using ng-repeat for displaying data.
Sample JSON:
$scope.sampleTest = [{"city": "Chennai", "name":"Sample"},
{"city": "Madurai", "name":"Test"}, {"city": "Chennai", "name":"Testing"}]
I'm using uibaccordion for grouping data.
Expected Output:
*Chennai
Sample, Testing
*Madurai
Test
I'll get dynamic json data. Can anyone help me in this.
You can group by city name using filter,
<body ng-controller="myCtrl">
<div ng-repeat="(key, value) in sampleTest | groupBy: '[city]'">
<div ng-repeat="player in value">
{{key}} {{ player.name }}
</div>
</div>
</body>
DEMO
var app = angular.module('sampleApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
$scope.sampleTest = [{"city": "Chennai", "name":"Sample"},
{"city": "Madurai", "name":"Test"}, {"city": "Chennai", "name":"Testing"}];
});
<!DOCTYPE html>
<html ng-app="sampleApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
<div ng-repeat="(key, value) in sampleTest | groupBy: '[city]'">
<div ng-repeat="player in value">
{{key}} {{ player.name }}
</div>
</div>
</body>
</html>
Instead of doing <div ng-repeat="(key, value) in sampleTest"> ... </div>, you can do <div ng-repeat="(key, value) in merge(sampleTest)"> ... </div> if you define a function merge to transform the sampleTest object.
function merge(toMerge) {
var merged = {};
for (k in toMerge) {
if (k in merged) {
merged[k] += toMerge[k];
} else {
merged[k] = toMerge[k];
}
}
return merged;
}
Related
<div ng-repeat="tweet in twitts | limitTo : limitTo : startFrom">
I need "startFrom" as Dynamic parameter.
There are many similar questions here but all are unsolved.
Here's a snippet working:
var app = angular.module('app', []);
app.controller('mainCtrl', function ($scope) {
$scope.array = [];
for (var i = 1; i <= 1000; i+=10) {
$scope.array.push(i);
}
$scope.startForm = $scope.array[2];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<select ng-options="obj as obj for obj in array" ng-model="startForm"></select>
<ul>
<li ng-repeat="obj in array | limitTo: startForm" ng-bind="obj"></li>
</ul>
</body>
</html>
I'd like to supply a filter value via a variable. What is wrong with the ng-repeat line below where I attempted to include the model reference {{fil}}?
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : {{fil}}">
{{ x }}
</li>
</ul>
<p>This example displays only the names containing the letter {{ fil }}.</p>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
$scope.fil = "a";
});
</script>
</body>
</html>
You should pass it without interpolation{{}}, so it will apply filter fil which is there in scope.
<li ng-repeat="x in names | filter : fil">
{{ x }}
</li>
I want to filter the ng-repeat values using
ng-repeat="obj in object | filter :searchtext"
but it should show the result only after the user give values to the searchtext.
it shouldn't list out the values on page load itself.
Thanks in advance :)
you can use ng-show=searchtext on ng-repeat element.
try this snippet
function ListCrtl($scope) {
$scope.items = [1, 2, 3, 4, 5];
}
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="ListCrtl">
<input ng-model="search.term" />
<p ng-show="search.term" ng-repeat="item in items|filter:search.term">{{item}}</p>
</div>
</body>
</html>
Have condition like this
ng-if="searchtext" ng-repeat="obj in object | filter :searchtext"
Example:
<!doctype html>
<html ng-app="docsSimpleDirective">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input type="search" class="form-control" placeholder="Rechercher" data-ng-model="search" />
<div ng-if="search" ng-repeat="departement in depatements | filter:search">
<pre>{{departement}}</pre>
</div>
</div>
</body>
</html>
script.js:
angular.module('docsSimpleDirective', [])
.controller('Ctrl', function($scope) {
$scope.depatements = [
{"codeDept": "01", "libelleDept": "D1", "libelleRegion":"R1", "codeRegion": "04"},
{"codeDept": "02", "libelleDept": "D2", "libelleRegion":"R2", "codeRegion": "08"},
{"codeDept": "03", "libelleDept": "D3", "libelleRegion":"R3", "codeRegion":"09"}
];
})
I'm new to AngularJS and am trying to use it to link up with a simple web API I have in place. I already have URLs that return JSON data in the format: http://127.0.0.1:8000/posts/ followed by a date in the format YYYY-MM-DD. (example would be http://127.0.0.1:8000/posts/2015-07-28)
I have an input text box which I want to use to get the JSON data from my API and list it out, meaning if I enter 2015-07-28 into the input box, it should pull the JSON data from the API appropriately without a page refresh by appending the string value from the input box onto whatever URL I want (in this case that would be http://127.0.0.1:8000/posts/).
Here is what I have as of right now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
var ListingApp = angular.module('ListingApp', []);
ListingApp.controller('PostCtrl', function($scope, $http) {
$scope.select = "";
var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
console.log(postJSON);
$http.get(postJSON)
.then(function(res) {
$scope.posts = res.data;
console.log($scope);
});
});
</script>
</head>
<body ng-app="ListingApp">
<div ng-controller="PostCtrl">
<form name="dateForm">
<input type="text" id="dp" name="datepicker" ng-model="select" placeholder="Enter Date">
</form>
<span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>
<ul>
<li ng-repeat-start="post in posts">
pk: {{ post.pk }}
</li>
<li>
author: {{ post.author }}
</li>
<li ng-repeat-end>
category: {{ post.category }}
</li>
</ul>
</div>
<!-- Importing jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>
Use ng-change or watch your model. Depending on your input you may want to use the debounce in ng-model-options.
var ListingApp = angular.module('ListingApp', []);
ListingApp.controller('PostCtrl', function($scope, $http) {
$scope.select = "";
var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
console.log(postJSON);
function getPost() {
$http.get(postJSON)
.then(function(res) {
$scope.posts = res.data;
console.log($scope);
});
}
// option #1 with ng-change="change()"
$scope.change = function() {
getPost();
}
// option #2 with watch
$scope.$watch('select', function (val, old) {
console.log(val);
getPost();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="ListingApp">
<div ng-controller="PostCtrl">
<form name="dateForm">
<input type="text" id="dp" name="datepicker" ng-model-options="{ debounce: 500 }" ng-change="change()" ng-model="select" placeholder="Enter Date">
</form>
<span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>
<ul>
<li ng-repeat-start="post in posts">
pk: {{ post.pk }}
</li>
<li>
author: {{ post.author }}
</li>
<li ng-repeat-end>
category: {{ post.category }}
</li>
</ul>
</div>
<!-- Importing jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>
I have a working table with a filter:
http://plnkr.co/edit/WnV7OUplcLHVOKbeTrSw?p=preview
After wrapping it in a tabset it stops working (the filter is still updated):
http://plnkr.co/edit/8uw2UhSC59txms5X563L?p=preview
But it worked with old versions before I updated:
http://plnkr.co/edit/eJvYtpc3efkydsQy8caL?p=preview
(angular 1.0.8 + bootstrap 2.0.3 + angular-ui-bootstrap-0.6.0)
Why did it stop working after the update?
http://plnkr.co/edit/70sLuA4gltgxhwTE0XT1
HTML (Just modified the filter usage)
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab heading="broken filter">
<form class="form-inline" role="form">
<select id="okFilterbox" ng-model="okFilterBool">
<option>nothing</option>
<option>all</option>
</select>
</form>
<p>{{okFilterBool}}</p>
<div>
<table>
<tr ng-repeat="item in items | filterItem:okFilterBool">
<td>{{item.name}}</td>
</tr>
</table>
</div>
</tab>
<tab heading="tab2">
</tab>
</div>
</body>
</html>
JS (Changed the way the filter is defined to make a new 'Angular' filter)
angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
$scope.okFilterBool = "all";
$scope.items = [
{ name: 'A'},
{ name: 'B'},
{ name: 'C'}
];
};
angular.module("plunker").filter("filterItem", function(){
return function(array, okFilterBool){
if(okFilterBool == "all"){ return array; }
return [];
}
})