Using ng-if with <li> and ng-repeat

Question

I have a variable in my $scope called $scope.sortField .

Based on the value in this variable ( 'default' or otherwise), I'm creating my html view:

<li ng-if="sortField != 'default'" ng-repeat="form in forms | filter:filterStates() | orderBy:sortField:isAsc " class="row {{Contextual}}" style="margin-bottom: 2px;">

<li ng-if="sortField == 'default'" ng-repeat="form in forms | filter:filterStates() " class="row {{Contextual}}" style="margin-bottom: 2px;">

<div> 
...
...
<div>

</li>

But I'm not able to get it to work. Only the 2nd <li> works whereas the 1st one doesn't.

The reason I'm doing the above is because I want to use orderBy function in ng-repeat only when $scope.sortField != default .

What am I doing wrong?

Answer 1

I didn't get what you did in filter, just confirmed by the below code snippet, and it works as expected with the ng-if and orderBy . Let me know if there is any differences.

 angular.module("app", []).controller("myCtrl", function($scope) { $scope.sortField = 'default'; $scope.forms = [{ title: 'aaa', detail: '4444' }, { title: 'bbb', detail: '3333' }, { title: 'ccc', detail: '2222' }, { title: 'ddd', detail: '1111' }, ]; $scope.forms2 = [{ title: 'aaaa', detail: 'test detail1' }, { title: 'bbbb', detail: 'test detail2' }, { title: 'cccc', detail: 'test detail3' }, { title: 'dddd', detail: 'test detail4' }, ]; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> <input type='text' ng-model="sortField"> <ui> <li ng-if="sortField != 'default'" ng-repeat="form in forms | orderBy:sortField:isAsc " class="row {{Contextual}}" style="margin-bottom: 2px;">{{form.title}} - {{form.detail}}</li> <li ng-if="sortField == 'default'" ng-repeat="form in forms2" class="row {{Contextual}}" style="margin-bottom: 2px;">{{form.title}} - {{form.detail}}</li> </ui> </div>

Answer 2

Here's how I would like to solve this. In the snippet below, notice there is a sample dropdown to illustrate the sortField selection which is set to default . Notice how sorting is not performed (for both title and detail ).

If we change the sortField to title or detail , we'd notice the sorting getting performed. So, it does work how you want it.

See the working snippet:

 angular.module("app", []).controller("myCtrl", function($scope) { $scope.fields = ["default", "title", "detail"]; $scope.sortField = $scope.fields[0]; $scope.forms = [{ title: 'aaa', detail: '4444' }, { title: 'cbb', detail: '7333' }, { title: 'bcc', detail: '5222' }, { title: 'ddd', detail: '1111' }, ]; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> <select ng-model="sortField" name="sortfield" ng-options="field for field in fields"> </select> <ui> <li ng-if="sortField != 'default'" ng-repeat="form in forms | orderBy:sortField:isAsc " class="row {{Contextual}}" style="margin-bottom: 2px;">{{form.title}} - {{form.detail}}</li> <li ng-if="sortField == 'default'" ng-repeat="form in forms" class="row {{Contextual}}" style="margin-bottom: 2px;">{{form.title}} - {{form.detail}}</li> </ui> </div>

Answer 3

You can move the ng-if condition into a method and have move the condition up one level

 <ul ng-if="isDefault()" >
   <li ng-repeat="form in forms | filter:filterStates() | orderBy:sortField:isAsc " class="row {{Contextual}}" style="margin-bottom: 2px;">
</ul>

 <ul ng-if="isDefault()" >
    <li ng-repeat="form in forms | filter:filterStates() " class="row {{Contextual}}" style="margin-bottom: 2px;">
</ul>


$scope.isDefault=function(){
  if($scope.sortField === 'default'){
        return true;
  }else{
       return false;
  }
}