使用 ng-if 和 <li> ng-repeat(英语：ng-if)

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>

但我无法让它工作。只有第 2<li>有效，而第 1 个无效。

我做上述事情的原因是因为我想仅在ng-repeat中使用orderBy函数$scope.sortField != default.

我做错了什么？

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

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

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

请参阅工作片段：

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

您可以将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;
}
}