AngularJS filter single property of object without ng-repeat

Question

I need some help with AngularJS filters.. (Angularjs 1.2.7)

This is my problem:

I have a class User like this.

Public Class User
    Public Property UserID As Integer
    Public Property EMail As String
    Public Property Password As String
    Public Property Firstname As String
    Public Property Lastname As String
    Public Property Creator As Integer
    Public Property LastEditedBy As Integer
    Public Property Company As Company
End Class

and a Company Class like this:

Public Class Company
    Public Property CompanyID As Integer
    Public Property Name As String
    Public Property RegistrationDate As String
    Public Property Creator As Integer
    Public Property LastEditDate As String
    Public Property LastEditedBy As Integer
    <ScriptIgnore>
    Public Property Users As List(Of User)
    Public Property Companytype As Companytype
    <ScriptIgnore>
    Public Property PriceLists As List(Of CompanyPriceList)
End Class

Well, now concentrate on the 2 Property (Creator and LastEditedBy) in my Company or User Class. I want to get the Firstname and Lastname of the company's creator and editor in my single company view.

With this:

companyManagement.getCompany = function (companyId) {
    var cmp = $filter('getCmpById')(companyId);
    return cmp;
};

I get the whole company with those two integers as an object.. Now in my GUI i want to show the first- and lastname of the user belonging to this id.

app.filter('getUsrById', function (userManagement) {
var users = userManagement.getUsers();
return function (list) {
    var i = 0, len = users.length;
    for (; i < len; i++) {
        //convert both ids to numbers to be sure
        if (+users[i].UserID == +list) {
            return users[i];
        }
    }
    return "not found";
};

});

With this filter I get the whole user object belonging to the id. Now is there any way, I can show just those two properties of a user? Anything like this...

 <span data-ng-model="creatorFirstname">{{ user.firstname | getUsrById:{userId:singleCompany.Creator} }}</span>
 <span data-ng-model="creatorLastname">{{ user.lastname | getUsrById:{userId:singleCompany.Creator} }}</span>
 <span data-ng-model="editorFirstname">{{ user.firstname | getUsrById:{userId:singleCompany.LastEditedBy} }}</span>
 <span data-ng-model="editorLastname">{{ user.lastname | getUsrById:{userId:singleCompany.LastEditedBy} }}</span>

I didn't want to declare the Properties As User, because I have them in both classes and I want a bit of consistence. Not in User -> As Integer And in Company -> As User So I can just ignore them and send the old data back to the server, because the LastEditedBy property is always overwritten by it and the Creator property always stays the same.

Thanks for your help!

i am sure your problem is easy to solve - but your example is described very complicated. and it seems there is lot of code that can't be seen. please try create a plunkr or fiddle. it would help us to help you. — michael
– michael, Commented Jan 10, 2014 at 14:23
This makes no sense. If it is a single value, what are filtering? — Dalorzo
– Dalorzo, Commented Jan 10, 2014 at 14:24
Hi Michael, I guess u just have to concentrate on the last part. I have a Company and I want to show the First and Lastname of a User, those properties are in an user object which I filter with this filter above (through ID). And I want to use the filter in my GUI just like my code above in a similar way. this {{ user ... |filter }} is the object and from this I just want the two properties shown. — Anthrax
– Anthrax, Commented Jan 10, 2014 at 14:46

Gruff Bunny · Accepted Answer · 2014-01-10 15:55:35Z

3

Not sure that a filter is the right mechanism to do what you want here. I think the most natural way to code this would be to have a company, lastEditedBy and creator properties on your scope and to work out which users are the ones that your interested in and add them to your company model.

When your company is retrieved add a couple of lines to your success handler (here using underscore js to get the user

$scope.lastEditedBy = _.findWhere( $company.users, { UserID : $company.LastEditedBy } );
$scope.creator = _.findWhere( $company.users, { UserID : $company.Creator } );

Then you just need to reference whatever property you need from lastEditedBy and creator:

<span>{{lastEditedBy.firstname}}</span>
<span>{{lastEditedBy.lastname}}</span>
<span>{{creator.firstname}}</span>
<span>{{creator.lastname}}</span>

edited Jan 10, 2014 at 15:55

answered Jan 10, 2014 at 14:33

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

btm1 · Accepted Answer · 2014-04-30 15:47:49Z

You actually can do this with $filter you just return the single value and grab sub zero like so... and in fact you could make your own findWhere filter:

lrApp.filter('findWhere',function($filter){
    return function(collection,search) {
        var refined = $filter('filter')(collection,search);
        return refined[0];
    }
});

$filter('findWhere')($scope.users,{ UserID : $company.LastEditedBy });

or even better yet and i've tested this and it works

angular.findWhere = function(collection,search) {
    var $filter = angular.element(document).injector().get("$filter"),
        refined = $filter('filter')(collection,search);
    return refined[0];
}

obviously you'll need to replace "angular.element(document)" with whatever node your app is booted on and I've done it this way because i placed this function outside of the run function but if it were inside of the run function you would just inject the $injector service and then change "angular.element(document).injector()" to "$injector.get("$filter")" or even just inject $filter to the run function.

Vinit Solanki · Accepted Answer · 2017-04-25 12:52:05Z

0

I know this question is too old to answer, but may be it will help other.

<span ng-bind="(users | filter : {UserID : singleCompany.Creator } : true)[0].firstname"></span>
<span ng-bind="(users | filter : {UserID : singleCompany.Creator } : true)[0].lastname"></span>
<span ng-bind="(users | filter : {UserID : singleCompany.LastEditedBy } : true)[0].firstname"></span>
<span ng-bind="(users | filter : {UserID : singleCompany.LastEditedBy } : true)[0].lastname"></span>

answered Apr 25, 2017 at 12:52

Vinit Solanki

2,0412 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

AngularJS filter single property of object without ng-repeat

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related