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?

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?

• javascript
• angularjs
• angular-ng-if

• are you paring two strings? sortField != default – Aravind Commented Apr 18, 2017 at 0:45
• @Aravind yes. $scope.sortField = 'default'; OR it can be some other string. – 90abyss Commented Apr 18, 2017 at 0:47
• what is happening currently both condition fails or ? – Aravind Commented Apr 18, 2017 at 0:48
• No. The problem is that only the second < li > works. Basically only the < li > which is defined later works. – 90abyss Commented Apr 18, 2017 at 0:49
• 1 the more I look at this, the more confused I bee. instead of having two identical lists and using ng-if, why not just set the value of sortField to undefined when you don't want an orderBy applied? Why do you have to supply a meaningless 'default' string value? – Claies Commented Apr 18, 2017 at 3:03

3 Answers 3

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./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>

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./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>

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