AngularJS - Have a non-repeatable element within ng-repeat

Question

This question is a little hard to explain so i will try with my actual code to show the example. I am using ng-repeat using the syntax "ng-repeat='a in achievements = ( | achievements entity is not defined until within the ng-repeat that is not an option. i am forced to place it AFTER the ng-repeat has ended. Is there a different way to accomplish this, to be able to reference the filtered contents of the object before or within the ng-repeat (but without having it actually repeated)

            <div style="padding:10px;margin-bottom:10px;" ng-repeat="a in achievments =(userAchievementConfig.achievements 
                                                                    | filter:userAchievementConfig.filters.search 
                                                                    | filter:{UserTeam:userAchievementConfig.filters.team}
                                                                    | filter:{UserDept:userAchievementConfig.filters.dept})"
                                                    ng-if="$index >= userAchievementConfig.startNum && $index <= userAchievementConfig.endNum">
            <div ng-if="achievements.length == 0" class="alert alert-info text-center">No users match your current filter</div>
            <div class="col-sm-2">
                <img ng-if="a.picture" data-ng-src="data:image/png;base64,{{a.picture}}" border=0 class='img-rounded pull-left' style="max-height:125px;max-width:100%;" >
                <div ng-if="!a.picture" style="height:125px;width:100%;padding:3px;background-color:#CCC;"></div> 
            </div>
            <div class="col-sm-10">
                <h4 ng-bind="a.UserName"></h4>
                <span ng-bind="a.sComments"></span>
                <br><i> - <span ng-bind="a.RequestedByName"></span> in <span ng-bind="a.timeSubmitted"></span></i>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="col-sm-6" ng-if="!userAchievementConfig.filters.search">
            <ul uib-pagination total-items="userAchievementConfig.achievements.length"  boundary-link-numbers="true" max-size="3" ng-model="userAchievementConfig.pageNum" class="pagination-sm nomargin" items-per-page="userAchievementConfig.itemsPerPage"></ul>
        </div>
        <div class="col-sm-6" ng-if="!userAchievementConfig.filters.search">
            Showing {{userAchievementConfig.startNum+1}} - {{userAchievementConfig.endNum+1}} of {{userAchievementConfig.achievements.length}} achievements
        </div>
        <div class="clearfix"></div>

it's still not really clear what you are trying to accomplish, or what your issue is here. — Claies
– Claies, Commented Apr 6, 2017 at 0:17
I want to move pagination before the ng-repeat, but still be able to reference the filtered list. But that filtered list doesn't exist until the ng-repeat is started — lonewolf217
– lonewolf217, Commented Apr 6, 2017 at 0:35
you could use ng-repeat with an alias, eg. ng-repeat = a in userAchievementConfig.achievements | allYourFilters as achievements, which would make achievements a $scope property. — Claies
– Claies, Commented Apr 6, 2017 at 0:43
I should have figured this out before .. i didn't make the connection that the alias was within the scope of the ng-repeat (since i can reference it outside and after the ng-repeat). i was unable to refer to it BEFORE the ng-repeat as $scope.achievements, but as you said once i made it part of an object, like ng-repeat = a in $scope.userAchievementsConfig.filteredachievements = (<source> | <filters>) then it started working :( — lonewolf217
– lonewolf217, Commented Apr 6, 2017 at 0:55

Vindhyachal Kumar · Accepted Answer · 2017-04-06 01:02:24Z

1

You can get filtered item without ng-repeat as below code

$scope.filteredItems = $scope.$eval("userAchievementConfig.achievements  | filter:userAchievementConfig.filters.search | filter:{UserTeam:userAchievementConfig.filters.team}| filter:{UserDept:userAchievementConfig.filters.dept}");

answered Apr 6, 2017 at 1:02

Vindhyachal Kumar

1,8002 gold badges24 silver badges35 bronze badges

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

3 Comments

lonewolf217 Over a year ago

Thanks, I was not aware of doing it this way

Vindhyachal Kumar Over a year ago

Please mark it as answer if it resolves your issue so that others can get benefits

lonewolf217 Over a year ago

I will test it and mark as answer if it works for my case

Collectives™ on Stack Overflow

AngularJS - Have a non-repeatable element within ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related