$route.reload not updating service data - angularjs

I am very much new to AngularJS.
Generally I have seen people using $route for refreshing data from database. But for learning purpose I have created an object in the custom service, stored some data in the Object and calling that service in the controller.
But when I am adding more values in the object and try to update it using the ngClick, no changes take place. Though, on refreshing the whole page, changes takes place. But I just want that particular section to update.
Here's my JavaScript code:
var app=angular
.module('app',['ngRoute'])
.service('data', function(){
this.students=[
{id: 1, name: 'Mark', gender: 'Male', city: 'London'},
{id: 2, name: 'Henry', gender: 'Male', city: 'Manchester'},
{id: 3, name: 'John', gender: 'Male', city: 'Chennai'},
{id: 4, name: 'Sara', gender: 'Female', city: 'Sydney'},
{id: 5, name: 'Tom', gender: 'Male', city: 'New York'},
{id: 6, name: 'Pam', gender: 'Male', city: 'Los Angeles'},
{id: 7, name: 'Catherine', gender: 'Female', city: 'Chicago'},
{id: 8, name: 'Mary', gender: 'Female', city: 'Houston'},
{id: 9, name: 'Mike', gender: 'Male', city: 'Phoenix'},
{id: 10, name: 'Rosie', gender: 'Female', city: 'Manchester'},
{id: 11, name: 'Sasha', gender: 'Female', city: 'Hyderabad'},
{id: 12, name: 'Naatasha', gender: 'Female', city: 'Bhungi'},
// {id: 13, name: 'akash', gender: 'Male', city: 'lugi'},
// {id: 14, name: 'aaakash', gender: 'Male', city: 'lugi'}
];
})
.controller('studentcontroller',function($scope,data,$route){
$scope.rdata=function(){
console.log("asd");
$route.reload();
};
$scope.students=data.students;
});
Here's the code calling it
<h1>List of Students</h1>
<ul>
<li ng-repeat="student in students">
{{student.name}}
</li>
</ul>
<button ng-click="rdata()">Reload Data</button>
Please help me in learning something new.

Related

How to filter array object from another array object?

I want to make another array object from an array object, suppose I fetched a huge data from an api but I need only particular elements from that object. Exampl:-
const mainArray = [
{id: 1, name: 'John', age: 10},
{id: 2, name: 'Mark', age: 14},
{id: 3, name: 'Kevin', age: 15},
{id: 4, name: 'Julie', age: 16},
{id: 5, name: 'Liz', age: 10},
{id: 5, name: 'Emma', age: 11},
{id: 6, name: 'Robert', age: 13},
]
So suppose we have a huge list now I only want Kevin, Emma & Mark to display, for that I need an array of them like this:-
const specialKids = [
{id: 2, name: 'Mark', age: 14},
{id: 3, name: 'Kevin', age: 15},
{id: 5, name: 'Emma', age: 11},
]
How can I achieve that ?
To do this you can use the filter method of JS.
Documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter?retiredLocale=de
in your case something like this should be enough:
let specialKids[];
specialKids = mainArray.filter(item => item.name === "Mark" || item.name === "Kevin" || item.name === "Emma")
ArrayList<String> yourintList = new ArrayList<>(Arrays.asList(yourArray));
for (int i = 0; i < yourintList.lenght; i++) {
if (yourintList.contains("Kevin")) {
do something
}

How can i sort the list and print in react?

How can i sort the data and print in react.
which libraries do i need to use ?
here is the data which is to be sorted field wise
data = [{
key: 1,
name: 'Steve',
city: 'Paris',
}, {
key: 2,
name: 'Tim',
city: 'London',
}, {
key: 3,
name: 'Stella',
city: 'Bankok',
}, {
key: 4,
name: 'John',
city: 'Paris',
}];
Use Array.prototype.sort() for this.
Check this example:
data = [{
key: 1,
name: 'Steve',
city: 'Paris',
}, {
key: 2,
name: 'Tim',
city: 'London',
}, {
key: 3,
name: 'Stella',
city: 'Bankok',
}, {
key: 4,
name: 'John',
city: 'Paris',
}];
data.sort((a,b) => a.name > b.name);
console.log('updated data', data)

Select-ui removes model object from select options in some versions

I have a list of objects that I iterate in the repeat attribute of ui-select.
I bind in the model one of these objects and then it disappears from the select options.
Html-Snippet
<div ui-select="" data-ng-disabled="" data-ng-model="selectedPerson">
<div ui-select-match="" placeholder="Select">
<div>
<span>{{$select.selected.name}}</span>
</div>
</div>
<div ui-select-choices="" data-repeat="person in people" data-scrollable="">
<div>
<span class="itembalance">{{person.name}}</span>
</div>
</div>
</div>
Js-Controller
app.controller('DemoCtrl', function($scope, $http, $timeout) {
$scope.people = [
{ name: 'Adam', email: 'adam#email.com', age: 12, country: 'United States' },
{ name: 'Amalie', email: 'amalie#email.com', age: 12, country: 'Argentina' },
{ name: 'Estefanía', email: 'estefania#email.com', age: 21, country: 'Argentina' },
{ name: 'Adrian', email: 'adrian#email.com', age: 21, country: 'Ecuador' },
{ name: 'Wladimir', email: 'wladimir#email.com', age: 30, country: 'Ecuador' },
{ name: 'Samantha', email: 'samantha#email.com', age: 30, country: 'United States' },
{ name: 'Nicole', email: 'nicole#email.com', age: 43, country: 'Colombia' },
{ name: 'Natasha', email: 'natasha#email.com', age: 54, country: 'Ecuador' },
{ name: 'Michael', email: 'michael#email.com', age: 15, country: 'Colombia' },
{ name: 'Nicolás', email: 'nicolas#email.com', age: 43, country: 'Colombia' }
];
$scope.selectedPerson = { name: 'Wladimir', email: 'wladimir#email.com', age: 30, country: 'Ecuador' };
});
Plnkr here
Any idea what is wrong. This started happening after I upgraded to this version. It does not occur with 0.7.* I could not find any changelog that indicated the reason for this.
Target version is 0.17.1
This might be a bug about ui-select. If you set the value after directive is compiled, then there is no problem
$timeout(function() {
$scope.select.selectedPerson = $scope.people[1];
}, 2000);
http://plnkr.co/edit/sGnZcV6ErMPD1R6MG5U0?p=preview
But if you set the default value before it is compiled, then option is removed.
Ok, worked around it and compared the two versions 0.17.1 and 0.18.0
Seems some changes have been done in both. I did not dig too much but setting remover-selected="false" seems to solve the problem. in 0.17.1 this version was set by default to false though now is is set based on uiSelectConfig.
<div ui-select="" data-ng-disabled="" data-ng-model="selectedPerson" remove-selected="false">
Anyone else stumbles upon this, I would recommend going with 0.17.1 though which is mostly the same.

Angular JS chaining filterFilter

This is my angular code.
$scope.names = [
{name: 'Tobias', gender: 'm'},
{name: 'Jeff', gender: 'm'},
{name: 'Lisa', gender: 'f'},
{name: 'Diana', gender: 'f'},
{name: 'James', gender: 'm'},
{name: 'Brad', gender: 'm'}
];
$scope.filteredNames = filterFilter($scope.names, 'a');
$scope.filteredNamesByFemale = filterFilter($scope.names, {gender: 'f'});
I want to know how to chain the two filters filterFilter($scope.names, 'a') and filterFilter($scope.names, {gender: 'f'})
Pass $scope.filteredNames instead of $scope.names in the second call.

KendoUI Grid - filter not showing

In my angular-kendo application I'm unable to get the Grid filter to show at all - not even a filter icon, just plain column headers.
Here is my html:
<div ng-controller="IntroductionWizardCtrl">
<h3 class="text-muted">Step 2: Select Application To Describe</h3>
<div kendo-grid id="grid"
k-data-source="dataSource"
k-sortable="true"
k-on-change="selectedItem = data"
k-selectable="'row'"
k-pageable='{ "refresh": true, "pageSizes": 5 }'
k-filterable="true">
</div>
<div>
<p>{{selectedItem}}</p>
</div>
<br/>
<input type="submit" class="btn btn-primary" wz-next value="Proceed to Next Step"
data-ng-click="" />
</div>
here is the corresponding Angular controller:
'use strict';
angular.module('wizardApp').controller('IntroductionWizardCtrl', ['$scope', '$location', '$rootScope',
function ($scope, $location, $rootScope) {
$scope.dataSource = {
data: [{id: 1, name: "Account Underwriting - Misc App", bu: 50},
{id: 2, name: "Achieve - Distributed", bu: 43},
{id: 3, name: "ACT!", bu: 27},
{id: 4, name: "Actuarial Database", bu: 29},
{id: 5, name: "Adjustment Invoicing System (AIS)", bu: 34},
{id: 6, name: "buncy Download", bu: 43},
{id: 7, name: "Ariba", bu: 27},
{id: 8, name: "Athena NY", bu: 29},
{id: 9, name: "Authoria", bu: 34},
{id: 10, name: "Avenue", bu: 43},
{id: 11, name: "BC&IT - Services", bu: 27},
{id: 12, name: "Billing Website", bu: 29},
{id: 13, name: "Blue Butler", bu: 34},
{id: 14, name: "BOE External", bu: 43},
{id: 15, name: "Builders Risk", bu: 27},
{id: 16, name: "Business Intelligence", bu: 29},
{id: 17, name: "Care Center", bu: 34}],
pageSize: 5, serverFiltering: true
};
$scope.rowSelected = function(e) {
var grid = e.sender;
var selectedRows = grid.select();
for (var i = 0; i < selectedRows.length; i++) {
$scope.selectedItem = grid.dataItem(selectedRows[i]);
break;
}
};
$scope.categoryDataSelectedRows=[];
$scope.categoryData=
{
data:
[{name: "General Application Information"},
{name: "User Interface configuration description"},
{name: "Application Architecture"},
{name: "Database"},
{ name: "Backup & DR"},
{name: "Design"},
{ name: "Operational data"},
{ name: "Testing"},
{name: "Application Configuration details"},
{ name: "Application connectivity requirements"},
{name: "Deployment Requirements"},
{name: "Application dependencies"},
{name: "Infrastructure dependencies"},
{ name: "Business value assessment"},
{ name: "Data requirements"},
{name: "Hosting OS requirements"},
{ name: "License requirements"}], pageSize: 5
}
$scope.rowSelectedCategory = function(e) {
var gridCategory = e.sender;
var selectedRowsCategory = gridCategory.select();
for (var i = 0; i < selectedRowsCategory.length; i++) {
$scope.selectedItemCategory = gridCategory.dataItem(selectedRowsCategory[i]);
break;
}
};
}
]);
I have looked over many examples, outside of Angular, where Kendo Grid has filtering working just fine. Yet, with angular-kendo I'm having this problem.
Well, as it turns out, my issue was with the order in which various css files were being loaded.
bootstrap was overwriting some other styles. Took me a while to sort this out, but now my angular-kendo grid is OK. Thanks for helping me!

Resources