某个元素上的触发函数-ngrepeat-angularjs

Question

Good morning,

I'm trying to change the limitTo filter on a certain list, my issue is: when I click to the trigger who change the filter limit the filter changes on all ng-repeated categories.

my function inside the main controller

$scope.showMore = function(limit) {

  if($scope.limitItems === $scope.itemsPerList) {
        $scope.limitItems = limit;
        $scope.switchFilterText = 'less';
  } else {
        $scope.switchFilterText = 'more';
        $scope.limitItems = $scope.itemsPerList;
  }


}

my scenario (I rewrote it in a simplified version)

<li ng-repeat="item in category.items | limitTo: limitItems ">
    {{item.title}}
</li>
<li ng-if="limitItems < (category.items.length)">
   <a ng-click="showMore(category.items.length)" >Show {{ switchFilterText }}</a>
</li>

Could you explain me what's wrong with me? I searched how to select a single element to apply the function but I didn't find anything useful

Update :

I found the way to solve my issue in this way: No functions inside the controller are involved to make this functionality works properly:

<li ng-repeat="category in maincategories" ng-init="limitItems = maxItemsPerList">
{{category.title}}
<ul>
    <li ng-repeat="item in category.items | limitTo: limitItems ">   {{item.title}}
    </li>
</ul>
<a ng-click="limitItems = category.items.length" href>
    <b ng-if="category.items.length > maxItemsPerList && limitItems != category.items.length "> Show more </b>
</a>

I'm not really convinced about Angular (I used it in my past and I was impressed by the performance but now I can see logics senseless):

What I learned:

ng-if and ng-click cannot be used in the same content because ng-if creates new scopes so if you put ng-if on top of the "show more" link it will break the code

ng-init cannot be used in the same element of the ng-repeat otherwise the var initialised will not be available inside the ng-repeat block

I think there is another way to do that, maybe more clean but in this specific case I can't do a lot.

Answer 1

ng-if and ng-click cannot be used in the same content because ng-if creates new scopes so if you put ng-if on top of the "show more" link it will break the code

Yes, ng-if creates a new scope, but it is possible to mix ng-if and ng-click (and most other directives). To do that, you'll be safer if you always write to atributes of another object instead of a simple variable. It is plain JavaScript prototypal inheritance in play.

<li ... ng-init="category.limitItems = maxItemsPerList">

ng-init cannot be used in the same element of the ng-repeat otherwise the var initialised will not be available inside the ng-repeat block

True, in the sense that variables are created in the local scope. But again, refer to an object.

I think there is another way to do that, maybe more clean but in this specific case I can't do a lot.

You don't need to do a lot, it is quite simple to do it right actually.

Some advices:

• Use ng-init with care. I know it will tempt us but always try to put logic inside controllers and services;
• Avoid assignments inside templates;
• Learn how to use controllerAs syntax. It gives you an object to write your models to ( the controller ), so solves most problems related to scope inheritance;
• Do not inject $scope, put your view models inside controllers.

Full code goes like this:

<li ng-repeat="category in maincategories" ng-init="category.limitItems = maxItemsPerList">
{{category.title}}
<ul>
    <li ng-repeat="item in category.items | limitTo: category.limitItems ">   {{item.title}}
    </li>
</ul>
<a ng-if="category.items.length > maxItemsPerList && category.limitItems != category.items.length" ng-click="category.limitItems = category.items.length" href>
    <b> Show more </b>
</a>