AngularJS method to bind single item of array with filter

Question

This will probably be an easy answer for someone. I am currently filtering an array to a single object with filter function detailFilter, but I'm not sure how to wrap and bind the html. So I used ng-repeat, even though this will only "repeat" one time for each call (see below). What is the correct way to do what I want to do?

<ul class="skill-bar">
    <li>
        <p data-ng-repeat="item in branchmasterdata | filter:detailFilter">Revenue {{ item.RevenueVal | currency }}</p>
        <div class="meter"><span data-percent="40" class="lightBlue">40%</span></div>
    </li>
    <li>
        <p data-ng-repeat="item in branchmasterdata | filter:detailFilter">OEC on Rent {{ item.OECVal | currency }}</p>
        <div class="meter"><span data-percent="80" class="blue">70%</span></div>
    </li>
    <li>
        <p data-ng-repeat="item in branchmasterdata | filter:detailFilter">Unit Count {{ item.UnitCountVal }}</p>
        <div class="meter"><span data-percent="80" class="green">80%</span></div>
    </li>
    <li>
        <p data-ng-repeat="item in branchmasterdata | filter:detailFilter">New Accounts {{ item.NewAccountsVal }}</p>
        <div class="meter"><span data-percent="100" class="red">100%</span></div>
    </li>
    <li>
        <p data-ng-repeat="item in branchmasterdata | filter:detailFilter">Average Discount {{ item.AvgDiscountVal }}</p>
        <div class="meter"><span data-percent="60" class="lightOrange">60%</span></div>
    </li>

</ul>

To clarify, my array of objects are per Sales Rep, and there is only one record with properties shown above per Sales Rep (Revenue, Unit Count, etc.). So I need to filter all of the <li> elements to a selected Sales -- which is what the "detailFilter does. But I feel like there must be a better way than using ng-repeat. — oakfish56
– oakfish56, Commented Feb 20, 2014 at 14:40

Anita · Accepted Answer · 2014-02-20 05:35:51Z

1

You can apply the filter in the controller iteself.

 for (i = 0; i < $scope.branchmasterdatain.length; i++) {

// your filter code }

I hope this may help you...

answered Feb 20, 2014 at 5:35

Anita

2,4102 gold badges21 silver badges30 bronze badges

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

1 Comment

oakfish56 Over a year ago

Sorry -- looking for an Angular markup alternative, please. Thanks.

oakfish56 · Accepted Answer · 2014-02-20 17:41:33Z

I ended up creating a separate $scope property called selectedSalesRep and was able to isolate the selected item. Therefore, I negated the need for a filter at all. Shoulda thought of that to begin with.

<ul class="skill-bar">
        <li>  
            <p>Revenue </p>
            <div class="meter"><span data-percent="80" class="lightBlue">{{ selectedSalesRep.RevenueVal | currency }}</span></div>
        </li>
        <li>
            <p>OEC on Rent {{ selectedSalesRep.OECVal | currency }}</p>
            <div class="meter"><span data-percent="80" class="blue">70%</span></div>
        </li>
        <li>
            <p>Unit Count {{ selectedSalesRep.UnitCountVal }}</p>
            <div class="meter"><span data-percent="80" class="green">80%</span></div>
        </li>
        <li>
            <p>New Accounts {{ selectedSalesRep.NewAccountsVal }}</p>
            <div class="meter"><span data-percent="100" class="red">100%</span></div>
        </li>
        <li>
            <p>Average Discount {{ selectedSalesRep.AvgDiscountVal }}</p>
            <div class="meter"><span data-percent="60" class="lightOrange">60%</span></div>
        </li>

    </ul>

Collectives™ on Stack Overflow

AngularJS method to bind single item of array with filter

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related