how to inject uppercaseFilter in angular? - javascript

I am trying to inject uppercase filter as dependency injection to controller , I tried injecting the orderByFilter and it worked flawlessly.
you can refer to my sample Plunker project
PlunkerLink
var app = angular.module("myApp", [])
.controller('HomeController',function($scope,orderByFilter,uppercaseFilter)
{
$scope.sortOrder = '-id';
$scope.upperCase = 'fName';
$scope.users = [
{ id: 1, fName: 'Hege', lName: "Pege" },
{ id: 2, fName: 'Kim', lName: "Pim" },
{ id: 3, fName: 'Jack', lName: "Jones" },
{ id: 4, fName: 'John', lName: "Doe" },
{ id: 5, fName: 'Peter', lName: "Pan" }
];
$scope.users = orderByFilter($scope.users, $scope.sortOrder);
$scope.users = uppercaseFilter($scope.users, $scope.upperCase);
});

You will have to process array of object manually, as upperCase filter works on strings only. In your case it can be like this for example:
$scope.users = $scope.users.map(function(obj) {
obj[$scope.upperCase] = obj[$scope.upperCase].toUpperCase();
return obj;
});
Demo: http://plnkr.co/edit/QaCisLJAUI1eWbZNTtdz?p=preview

It might help you.
HTML code-sample
<span>{{ users.fName | limitTo : 3 | uppercase }}</span>
<span ng-bind="users.fName | limitTo : 3 | uppercase "></span>
AngularJs code-sample
<script>
angular.module("myApp").controller("myController"), function($filter){
var result = $filter(‘limitTo’)(users.fName, 3);
$filter(‘uppercase’)(result);
...
}
</script>

Related

check if data is already present in array of objects

I have the following data with me.
var Inputdata = {};
Inputdata.firstName = 'Raul'
Inputdata.lastName = 'Peters'
I want to check if the firstName and lastName (together) is already present in the array of objects. Can someone please let me know how to achieve this.
UserData: [0]
firstName: 'Raul'
lastName: 'Peters'
Id: '4'
[1]
firstName: 'Amil'
lastName: 'Rikia'
Id: '5'
[2]
firstName: 'Riya'
lastName: 'Pillai'
Id: '6'
[3]
firstName: 'Natasha'
lastName: 'Shacke'
Id: '6'
[4]
firstName: 'Eric'
lastName: 'Coles'
Id: '6'
As you can see, Raul Peters is present in the array of objects in one array. I want the output to be true in this case. If Raul and Peters were in different objects, the answer should be false as Raul and Peters are not in the same object. Can anyone please let me know how to achieve this
Just do an Array.some check:
let isPresent = UserData.some(user => user.firstName == 'Raul' && user.lastName == 'Peters')
Use Array.find
arr.find( function(e){
if(e.firstname == 'Raul' && e.lastname == 'Peters')
return e;
});
const inputData = {};
inputData.firstName = 'Raul';
inputData.lastName = 'Peters';
const userData = [
{
firstName: 'Raul',
lastName: 'Peters',
Id: '4'
},
{
firstName: 'Amil',
lastName: 'Rikia',
Id: '5'
},
{
firstName: 'Riya',
lastName: 'Pillai',
Id: '6'
},
{
firstName: 'Natasha',
lastName: 'Shacke',
Id: '6'
},
{
firstName: 'Eric',
lastName: 'Coles',
Id: '6'
}
];
This function receives 2 arguments: the userData array of objects and the inputData object. Then, it uses the Array.prototype.some() method to see if there is at least one entry within the userData array that is an object matching the inputData object.
function alreadyExists(userData, inputData) {
return userData.some(entry => entry['firstName'] === inputData['firstName'] && entry['lastName'] === inputData['lastName']);
};
console.log(alreadyExists(userData, inputData));
If you wanna use underscore or lodash you can use function _.some. Using internal variable you can get needle element.
var needle = false;
var has = _.some(UserData, function(v) {
return (v.firstName===Inputdata.firstName && v.lastName===Inputdata.lastName) ? needle = v : false;
});
console.log(has)
console.log(needle)

AngularJS: Call JSON array value in nested Controller

How to call Json array value in other controller. Basically i work with nested controller. Nested controller will return first character of firstname and lastname.
For example if my first name is Anand Jee then It will return AJ, Rohan Kumar then it will return RK.
My AngularJS code.
//create module
var myApp = angular.module("myApp", []);
//create controller
myApp.controller("empCtrl", function ($scope) {
var Employees = [
{ FirstName: "Anand", LastName: "Jee", Roles: "Web Developer", Technology: ".NET" },
{ FirstName: "Pritus", LastName: "Dubey", Roles: "Window App Developer", Technology: "XAMARIN" },
{ FirstName: "Vineet", LastName: "Rai", Roles: "Web Developer", Technology: ".NET" },
{ FirstName: "Nilesh", LastName: "Pathak", Roles: "UI/UX Developer", Technology: "Photoshop" },
{ FirstName: "Vikesh", LastName: "Juyal", Roles: "Web Developer", Technology: "PHP" }
];
$scope.Employees = Employees;
});
myApp.controller("EmpShortName", function ($scope) {
$scope.getEmpShortName = function () {
//$scope.empShortName = $scope.Employees.FirstName + " " + $scope.Employees.LastName;//here is problem
$scope.empShortName = "NP";//For temp declaration
return $scope.empShortName;
};
});
PLUNKER DEMO
Pass the Employee object into the getEmpShortName function. Then just return the parsed value. Also, no need for the EmpShortName controller, just put the scope function in your empCtrl controller:
HTML:
<div class="empTextImage">{{getEmpShortName(emp)}}</div>
JS:
$scope.getEmpShortName = function (emp) {
return emp.FirstName.substr(0,1) + emp.LastName.substr(0,1);
};
Updated Plunker

how to set a default value for angular ui-select

Question :
how to set default value to the angular ui-select
drop down values are fetched from object and object wont be having default value.
and ui-select should set the default value in Frontend.
eg:
drop down values are as follows
1 -all fruits
2 -apple
3 -banana
4 -water melon
value from 2 to 4 are derived from object sent from server.but Frontend need to set default value ie 1 - all fruits
Referring to the below example set via ui-select2 how to migrate this in ui-select?
<select ng-model="fID" class="select" ui-select2 data-placeholder="select fruit">
<option value="">All fruits</option>
<option ng-repeat="f in frits value="{{f.fID}}">{{f.name}}</option>
</select>
<ui-select theme="select2" ng-model="fruits.selected">
<ui-select-match placeholder="select please" allow-clear="false"> {{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="f in fruits | filter:$select.search">
<div ng-bind-html="f.name | highlight: $select.search:'underline'"></div>
</ui-select-choices>
</ui-select>
http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview
https://github.com/angular-ui/ui-select
Link :angular-ui/ui-select
you didnt use an id or something like that for option value so ui-select compares object address to understand if it is selected.
var p1 = { name: 'Adam', email: 'adam#email.com', age: 10 };
$scope.person = {selected: p1};
$scope.people = [
p1,
{ name: 'Amalie', email: 'amalie#email.com', age: 12 },
{ name: 'Wladimir', email: 'wladimir#email.com', age: 30 },
{ name: 'Samantha', email: 'samantha#email.com', age: 31 },
{ name: 'Estefanía', email: 'estefanía#email.com', age: 16 },
{ name: 'Natasha', email: 'natasha#email.com', age: 54 },
{ name: 'Nicole', email: 'nicole#email.com', age: 43 },
{ name: 'Adrian', email: 'adrian#email.com', age: 21 }
];
change plunker like this and you will have a default selected value.
to set the default value on view you can use ng-init and set first object as selected
In your controller add the following code:
$scope.fruits.selected = {name: 'All fruits'};
The above will set the default selected value to the drop down.
I found this working example: http://jsfiddle.net/NfPcH/28/
Angular code:
<a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a>
Controller:
app.controller('Ctrl', function($scope, $filter) {
$scope.user = {
status: 2
};
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'}
];
$scope.showStatus = function() {
var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
};
});

Using angularjs filter and _.groupBy

Here's a simple example I created to replicate my issue. In my controller, I have an array of people:
$scope.people = [
{ name: 'fred', age: 20 },
{ name: 'bob', age: 22 },
{ name: 'jane', age: 24 },
{ name: 'mary', age: 22 },
{ name: 'ben', age: 24 },
{ name: 'sarah', age: 21 },
];
I have a filter defined:
.filter('grouped', function () {
return function (input) {
return _.groupBy(input, 'age');
}
})
You may notice that I'm using Lo-Dash to do the group by.
In my view I have a list defined:
<div class="list" ng-repeat="personGroup in people | grouped">
{{ $index }}
<div class="list" ng-repeat="person in personGroup">
{{ person.name }}
</div>
</div>
I get the result I'm after but I get a heap of errors in my developer console.
https://docs.angularjs.org/error/$rootScope/infdig?p0=10
I understand why I'm getting the error. This is explained in detail in the above link. I just don't know the proper way of achieving the result I'm after.
As you are creating new Array-objects when grouping the people, I would not use a filter at all. The easiest solution would be to do the grouping inside your controller:
...
$scope.groups = _.groupBy($scope.people, 'age');
...
Your ng-repeat attribute would then read like:
ng-repeat="personGroup in groups"
What version of angular are you using? I'm not getting any error:
http://plnkr.co/edit/bbDGjHWMGZx5GmNcggaw?p=preview

AngularJS : cannot connect factory to controller

I'm sorry if this is an easy question. I'm new and probably don't understand the right things to search for to find the answer.
I've basically followed this angularJS tutorial http://www.youtube.com/watch?v=i9MHigUZKEM
I've gotten through all of it except setting up a factory that connects to my controller.
Here is the code for the factory:
demoApp.factory('simpleFactory', function(){
var people = [
{ name: 'Will', age: '30' },
{ name:'Jack', age:'26' },
{ name: 'Nadine', age: '21' },
{ name:'Zach', age:'28' }
];
var factory = {};
factory.getPeople = function() {
return people;
};
});
Here is the controller:
demoApp.controller('FirstCtrl', ['$scope', 'simpleFactory', function ($scope, simpleFactory) {
$scope.people = simpleFactory.getPeople();
}]);
And just a simple repeat in the HTML:
Name:
<input type="text" ng-model="filter.name"> {{ nameText }}
<ul>
<li ng-repeat="person in people | filter:filter.name | orderBy: 'name'">{{ person.name }}- {{ person.age }}</li>
</ul>
The error I get is "TypeError: Cannot call method 'getPeople' of undefined" in the javascript console.
Note: This all works correctly when within the controller I have the data object hardcoded in like so:
demoApp.controller('FirstCtrl', ['$scope', 'simpleFactory', function ($scope, simpleFactory) {
$scope.people = [
{ name: 'Will', age: '30' },
{ name:'Jack', age:'26' },
{ name: 'Nadine', age: '21' },
{ name:'Zach', age:'28' }
];
}]);
A small change in your service;
demoApp.factory('simpleFactory', function(){
var people = [
{ name: 'Will', age: '30' },
{ name:'Jack', age:'26' },
{ name: 'Nadine', age: '21' },
{ name:'Zach', age:'28' }
];
return {
getPeople: function() {
return people;
};
}
});
And in your controller
demoApp.controller('FirstCtrl', ['$scope', 'simpleFactory', function ($scope, simpleFactory) {
$scope.people = simpleFactory.getPeople();
}]);
Essentially you're just missing the return statement from your 'factory' object, but it might be clearer if you do a little renaming as well to avoid confusion.
Example, adapted from the AngularJS book:
demoApp.factory('People', function(){ // Renamed factory to be more descriptive
var people = {}; // Renamed 'factory' to 'people', as an object we can prototype more functions later
people.query = function() { // called query, but could be getPeople
return [ // just return a static array for now
{ name: 'Will', age: '30' },
{ name:'Jack', age:'26' },
{ name: 'Nadine', age: '21' },
{ name:'Zach', age:'28' }
];
}
return people;
});
So now your controller can pull this information in:
demoApp.controller('FirstCtrl', ['$scope', 'People', function ($scope, People) { // dependency injection
$scope.people = People.query();
});
So now we have a descriptive factory for People that returns an object, one of which is called query. We can later update this query function to read in parameters, fire off AJAX calls and do some complicated stuff. But one step at a time :)

Categories

Resources