I am new to Angular and trying to group row's using Angular ui.grid.grouping. But I am seeing duplicate rows and its not grouped properly. I am using Angular js 1.7.2 version
app.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping' ]);
app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', function ($scope, $http, $interval, uiGridGroupingConstants ) {
$scope.gridOptions = {
enableSorting: true,
enableGrouping:true,
treeRowHeaderAlwaysVisible: false,
columnDefs: [
{ name: 'City', width:'50%', grouping: { groupPriority: 0 },defaultSort: {priority: 0}},
{ name: 'CustomerName', width:'30%' }
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
}
};
$scope.gridOptions.data = [
{ "City": "TEXAS", "CustomerName": "AAA"},
{ "City": "TEXAS", "CustomerName": "BBB"},
{ "City": "TEXAS", "CustomerName": "CCC" },
{ "City": "MICHIGAN", "CustomerName": "DDD" },
{ "City": "NEW YORK","CustomerName": "EEE" },
{ "City": "MICHIGAN" ,"CustomerName": "FFF"},
{ "City": "MICHIGAN", "CustomerName": "GGG" },
{ "City": "MICHIGAN", "CustomerName": "HHH" },
{ "City": "NEW YORK","CustomerName": "III" }
];
}])
HTML:
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
</div>
Actual Result:
Expected Result:
Instead of 2 Michigan one Michigan
Instead of 2 New York one New York
Tried same thing using ng-grid and I am getting perfect result as below:Exactly same thing I am trying to achieve it using angular ui-grid
#Steve, thanks for your suggestions. As per your suggestion I added grouping with delay while registeringApi as below:
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$timeout(function(){
$scope.gridApi.grouping.clearGrouping();
$scope.gridApi.grouping.groupColumn('City');
}, 300);
}
And it fixed it.
Try to add for column this row, it helps me:
sort: { priority: 0, direction: 'asc' }
Related
I have a REST api from elasticsearch. I want to retrieve the data of a specific field. That is, I want to retrieve the data in the Gender field. What I have done is I have consume the rest service in AngularJS as follows. But nothing is appearing on the browser. Can somebody help to achieve what I want to display?
angular.module("view.index", ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/menuIndex/', {
templateUrl: 'view-index/template/index.html',
controller: 'NewController',
controllerAs: 'newCtrl',
});
}])
.controller('NewController', ['$timeout', 'overlayMessage', '$location', 'userInformation', '$http', '$scope','menuService', function ($timeout, overlayMessage, $location, userInformation, $http, $scope, menuService) {
var myCtrl = this;
myCtrl.Form = {};
$http.get('http://admin:admin#localhost:9200/index1/_search?_source=Gender').
success(function(data) {
myCtrl.json = data;
});
}]);
The GET api http://admin:admin#localhost:9200/index-data/_search?_source=Gender returns me a json body like this:
{
"took": 17,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"failed": 0
},
"hits": {
"total": 30003,
"max_score": 1,
"hits": [
{
"_index": "index1",
"_type": "tbl",
"_id": "1",
"_score": 1,
"_source": {
"Gender": "Female"
}
},
{
"_index": "index1",
"_type": "tbl",
"_id": "2",
"_score": 1,
"_source": {
"Gender": "Male"
}
}
And in my front end, I want to access the data in the Gender field like this:
<div ng-controller="menuNsmCtrl">
<div ng-repeat="json in json">
<p>The ID is {{json.Gender}}</p>
</div>
</div>
First use then instead of success to catch the data. success is deprecated since the angular version 1.4
$http.get('http://admin:admin#localhost:9200/index1/_search?_source=Gender').
then(function(response) {
myCtrl.json = response.data;
});
}]);
now since you use controllerAs syntax you need to use the reference variable in the html also
<div ng-controller="NewController as myCtrl">
<div ng-repeat="json in myCtrl.json.hits.hits">
<p>The ID is {{json['_source'].Gender}}</p>
</div>
</div>
I'm trying to filter a nested array of objects with my own objects, by idSubject. But I'm not getting the right result.
I have articles (which have subjects)
And a array of objects (which are the subjects I want to filter the articles with)
Data looks like this:
So I'm trying to filter the array of articles by its subjects.
I tried the following:
<div class="panel panel-default"
ng-repeat="searchArticle in searchArticles | filter: {subjects: filterSubjects} as articleSearchResult">
So filterSubjects is the second screenshot and SearchArticles is the first screenshot.
Without much luck.
Hope you can help, please tell me if things are still unclear.
This custom filter will help you.
Example : http://plnkr.co/edit/jMizCLxPH6DtDA5wL15Q?p=preview
HTML:
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<h2>Select Subjects</h2>
<div ng-repeat="subject in subjects">
<label>
<input type="checkbox" ng-model="filterSubjects[subject.id]" ng-true-value="'{{subject.id}}'" ng-false-value="''">{{subject.name}}</label>
</div>
<h2>Filtered Articles</h2>
<div ng-repeat="searchArticle in searchArticles | subjectFilter:filterSubjects">{{searchArticle.name}}</div>
</div>
</body>
JS:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.searchArticles = [{
"name": "Article1",
"sid": "1"
}, {
"name": "Article2",
"sid": "1"
}, {
"name": "Article3",
"sid": "2"
}];
$scope.subjects = [{
"name": "Subject1",
"id": "1"
}, {
"name": "Subject2",
"id": "2"
}];
$scope.filterSubjects = [];
});
app.filter('subjectFilter', function() {
return function(articles, filterSubjects) {
filtered = articles.filter(function(e){return filterSubjects.indexOf(e.sid) >= 0},filterSubjects);
return filtered;
}
});
if you want to filter based on object :
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.searchArticles = [{
"name": "Article1",
"sid": "1"
}, {
"name": "Article2",
"sid": "1"
}, {
"name": "Article3",
"sid": "2"
}];
$scope.subjects = [{
"name": "Subject1",
"id": "1"
}, {
"name": "Subject2",
"id": "2"
}];
$scope.filterSubjects = [{
"name": "Subject1",
"id": "1"
}, {
"name": "Subject1",
"id": "2"
}];
});
app.filter('subjectFilter', function() {
return function(articles, filterSubjects) {
var sFiltered = [];
for (var i = 0; i < filterSubjects.length; i++) {
sFiltered.push(filterSubjects[i].id);
}
var filtered = articles.filter(function(e) {
return sFiltered.indexOf(e.sid) >= 0;
}, sFiltered);
return filtered;
}
});
hi i have a JSON like this:
pages[
{
"id": "74682309",
"labels": [
{
"term": "test1",
"probability": 0.069
},
{
"term": "test2",
"probability": 0.037
}
]
}];
and using tags-input i want the tags to read only the term and show the term so i can show and update.
i have
<tags-input ng-model="se.labels"></tags-input>
the 'se' comes from ng-repeat="se in searchCtrl.pages
Based on the documentation (http://mbenford.github.io/ngTagsInput/documentation/api) you can change the keyProperty and displayProperty to make it use "term" instead of "text"
I've created a fiddle to demonstrate how you can obtain the data needed, considering that the provided JSON is a valid JSON. Your JSON is invalid.
var myApp = angular.module('myApp',['ngTagsInput']);
myApp.factory('data', function() {
var data = [
{
"id": "74682309",
"labels": [
{
"text": "test1",
"probability": 0.069
},
{
"text": "test2",
"probability": 0.037
}
]
}];
return data;
});
myApp.controller('MyCtrl', ['$scope', 'data', function($scope, data) {
var values = [];
data.map(function(elem) {
return elem.labels.forEach(function(el) {
values.push({
"text" : el.text
});
});
});
$scope.tags = values;
}]);
And the html part:
<div ng-controller="MyCtrl">
<div class="elem">
<tags-input ng-model="tags"></tags-input>
</div>
</div>
Here is the fiddle:
http://jsfiddle.net/HB7LU/16554/
Update:
You haven't included the angular ng-tags-input extension as a tag into your question. Please see my updated fiddle:
http://jsfiddle.net/HB7LU/16557/
HI i am using kendo grid to bind data with json and angularjs
here is my code below.
this is the .cshtml page code below.
<div ng-app="Sample" ng-controller="SampleController">
<div>Products: {{products.length}}</div>
<div kendo-grid k-data-source="products" k-selectable="'row'"
k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'
k-columns='[
{ "field": "EmployeeKey", "title": "EmployeeId"},
{ "field": "FirstName", "title": "First Name"},
{ "field": "LastName", "title": "Last Name"},
{ "field": "DepartmentName", "title": "Department Name" },
{ "field": "EmailAddress", "title": "Email Id" }
]'>
</div>
</div>
<script>
var app = angular.module('Sample', ['kendo.directives']);
app.controller('SampleController', function ($scope, $http) {
debugger;
$http.get('~/api/Employee/Employee_Read').success(function (thisdata) {
var myData = $.parseJSON(JSON.parse(thisdata));
$scope.myData = myData;
});
$scope.filterOptions = {
filterText: '',
useExternalFilter: true,
};
});
</script>
and in controller which name is EmployeeController i used json data like below:
public ActionResult Employee_Read ([DataSourceRequest] DataSourceRequest request )
{
return Json(employeeRepositary.Employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
This code is working fine with #HtmlKendo grid but for this i am not able to display data.
Where i am wrong??
Please help me out from here.
Use kendo.data.ObservableArray for this case
$http.get('~/api/Employee/Employee_Read').success(function (thisdata) {
var myData = $.parseJSON(JSON.parse(thisdata));
$scope.products= new kendo.data.ObservableArray(myData.Data);
});
I am new to angularJS and I am having trouble with binding properties of scope so two way binding can work properly. I am using sample code to generate tabs.
<div ng-app="SampleApp">
<div id="tabs" ng-controller="GridController as gridcon">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
<input type="button" ng-click="changedata()" value="Check" />
</div>
</div>
Now my scope have two observable arrays and I want to show count of those arrays in tab title. I am using following code for controller.
var appRoot = angular.module('SampleApp', ["kendo.directives"]);
appRoot.controller('GridController', ['$scope', function ($scope) {
$scope.data1 = new kendo.data.ObservableArray([
{
issueId: 1,
issue: "County Incorrect"
},
{
issueId: 2,
issue: "City Incorrect"
},
{
issueId: 3,
issue: "Name Incorrect"
}
]);
$scope.data2 = new kendo.data.ObservableArray([
{
"id": 11,
"first_name": "James",
"last_name": "Butt",
"company_name": "Benton, John B Jr",
"address": "6649 N Blue Gum St",
"city": "New Orleans",
"county": "Bridgepoort",
"state": "LA",
"zip": 70116,
"phone1": "504-621-8927",
"phone2": "504-845-1427",
"email": "jbutt#gmail.com",
"web": "http://www.bentonjohnbjr.com"
},
{
"id": 12,
"first_name": "Josephine",
"last_name": "Darakjy",
"company_name": "Chanay, Jeffrey A Esq",
"address": "4 B Blue Ridge Blvd",
"city": "Brighton",
"county": "Livingston",
"state": "MI",
"zip": 48116,
"phone1": "810-292-9388",
"phone2": "810-374-9840",
"email": "josephine_darakjy#darakjy.org",
"web": "http://www.chanayjeffreyaesq.com"
}
]);
$scope.tabs = [{
title: 'Issue List (0)'.replace("0", $scope.data1.length),
url: 'tab1.html'
}, {
title: 'Corrected (0)'.replace("0", $scope.data2.length),
url: 'tab2.html'
}];
$scope.currentTab = 'tab1.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function (tabUrl) {
return tabUrl == $scope.currentTab;
}
$scope.changedata = function () {
$scope.data1.pop();
$scope.data2.pop();
console.log($scope.data1.length);
console.log($scope.data2.length);
}
}]);
Now this works fine when you are loading page for first time. Now on a button click ("Check" button), I am modifying the arrays. What should I do so that tab title is always in sync with length of arrays ? I have tried observable objects but unless I am using binding in view, they will just notify the event. Is there no other way except handling change event of observable arrays ?
you can Copy this piece of code inside the $scope.changedata function.
$scope.tabs = [{
title: 'Issue List (0)'.replace("0", $scope.data1.length),
url: 'tab1.html'
}, {
title: 'Corrected (0)'.replace("0", $scope.data2.length),
url: 'tab2.html'
}];
Also it remains outside as well.