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!

Answer 1

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>

Answer 2

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.

Answer 3

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>