How to inject an Angular variable into a filter from ng-repeat using underscore.js

Question

OK, let me try this again...

I have a value coming from an ng-repeat... like this:

<div class='span3 box box-nomargin' style="margin-left: 0px !important; padding-right: 20px;" ng-repeat="site in getSites">

This is the value of "site.networkId" is all I have to get the NAME of the network.

That being said, the network ID is: "2352wdfdsf23214" for instance.

The name is in another JSON Array... So I'm trying to pass this value into a FILTER for ANGULAR like this:

<span class="utilMonSmallText">{{ name | netNames:site.networkId }}</span>

Where name is the final value I need and netNames it the filter and site.networkId is my argument from the above ng-repeat.

So here's my filter:

myApp.filter('netNames', function(myNetID)
{
    console.log("Inside NetNames Filter: " + myNetID);

    var networkName = _.filter(myNetID, function(name){ return name ==="name"; });

        return networkName;
});

So if I had handlebars, I'd simply create a helper and poof, the needed result would be rendered. Angular; not so easy, or maybe I'm not seeing it.

The collection for networks has an ID and NAME. I simply want to replace the NAME with the ID being passed to GET the name.

Simple; right?

UPDATE: Here's my controller...

// getNetNames gets an array with all the network names in the database
$scope.getNetNames = dashboardData.getNetNames();
$scope.getNetNames.then(
        function(getNetNames) {

                $scope.getNetNames = getNetNames;
                $scope.netName = $.grep(getNetNames, function(n, i) { // just use arr

                    console.log("myName inside the topo getNetNames: " + n.myNetID)

                    return n.myNetID === "NAME";
                });

            console.log("get Names inside TOPO Ctrl: " + $scope.getNetNames);
        },
        function(response) {
            console.log(response);
        });

UPDATE: Here's my SERVICE

    getNetNames: function(netid) {
        var deferred = $q.defer();
            $http({method: 'GET', url: myNetsURL + "" + netid})
                    .success(function(data, status, headers, config) {
                        console.log("NETWORK Name: " + data);
                        //Push NET NAMES into array for use down below.
                        deferred.resolve(data);
                    })
                    .error(function(data, status, headers, config) {
                        deferred.reject(status);
                    });
        return deferred.promise;
    }

kubuntu · Accepted Answer · 2014-02-09 01:52:17Z

2

You are not passing site.networkId into your filter the right way:

myApp.filter('netNames', function() { // You can inject a service here
    return function(input, myNetID) { // the first parameter refers to "name" which is the json array that has the names
        console.log("Inside NetNames Filter: " + myNetID);

        var networkName = _.findWhere(input, {id: myNetID});

        return networkName.name;
    }
});

This assumes that the json array that has the names is in $scope.name.

edited Feb 9, 2014 at 1:52

answered Feb 9, 2014 at 0:04

kubuntu

2,5351 gold badge24 silver badges24 bronze badges

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

11 Comments

Peter The Angular Dude Over a year ago

Ranru - this is what's being rendered: <span class="utilMonSmallText ng-binding">[]</span>

Peter The Angular Dude Over a year ago

The untiMonSmallText is my CSS element. The "[]" is bizarre... but, I'm getting no errors... just "undefined" where the network "ID" should be (ie. the argument: myNetID)

Peter The Angular Dude Over a year ago

OMG - the INPUT argument you said would be "undefined" is NOT. It contains the NETWORK ID!!!!!!!!!! We're almost there...

kubuntu Over a year ago

The id is now available in your filter. The problem is with your underscorejs function. I don't know what the json array that has the name looks like.

Peter The Angular Dude Over a year ago

Here you are: {"id":"f2a66122-927f-4657-98b3-b031afecff69","networkType":1,"controllerIp":"10.7.12.1","redirectType":1,"networkCost":0,"networkWeight":0,"notes":null,"name":"Test Network"},{"id":"501b468c-9dca-4aae-947f-55554c504263","networkType":1,"controllerIp":"654.54.64.654","redirectType":1,"networkCost":39,"networkWeight":4,"notes":"This is a new network note","name":"Bills New Network ABC"}]

|

Collectives™ on Stack Overflow

How to inject an Angular variable into a filter from ng-repeat using underscore.js

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related