javascript - Using ng-if with <li> and ng-repeat - Stack Overflow

admin管理员组

文章数量:1415684

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

Share Improve this question Follow edited Apr 18, 2017 at 2:39 tanmay 7,91122 gold badges2323 silver badges3939 bronze badges asked Apr 18, 2017 at 0:42 90abyss90abyss 7,3872121 gold badges6868 silver badges101101 bronze badges 6

• 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

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 2

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

本文标签： javascriptUsing ngif with ltligt and ngrepeatStack Overflow