Question

我的$scope中有一个名为$scope.sortField的变量。

根据此变量（'default'或其他）中的值，我正在创建我的html视图：

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

但我无法让它发挥作用。只有第二个<li>有效，而第一个没有。{/ p>

我之所以这样做是因为我只想在orderBy ng-repeat时使用$scope.sortField != default中的var selection = CarNotes.Aggregate((i, j) => i + ", " + j);功能。

我做错了什么？

Answer 1

我没有得到您在过滤器中所做的操作，只是通过以下代码段确认，并且它与ng-if和orderBy一样正常工作。如果有任何差异，请告诉我。

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

以下是我想解决这个问题的方法。在下面的代码段中，请注意有一个示例下拉列表，用于说明sortField选项设置为default。请注意不执行排序（title和detail）。

如果我们将sortField更改为title或detail，我们会注意到要执行的排序。所以，它确实按照你想要的方式工作。

请参阅工作代码段：

＆＃13;

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'
    },
  ];
});

＆＃13;

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

＆＃13;

Answer 3

您可以将ng-if条件移动到方法中并将条件上移一级

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

使用ng-if和<li>和ng-repeat

3 个答案: