CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
lonewolf217
lonewolf217

Reputation: 629

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

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>

Upvotes: 0

Views: 62

Answers (1)

Vindhyachal Kumar
Vindhyachal Kumar

Reputation: 1794

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}");

Upvotes: 1

Related Questions