ng-if，不等于什么意思？

Question

我有一个简单的ng-repeat，用于显示一组值。在某些输出中，我有几个ng-if来显示/隐藏DIV。

HTML：

<div ng-repeat="details in myDataSet">

    <p>{{ details.Name }}</p>
    <p>{{ details.DOB  }}</p>

       <div ng-if="details.Payment[0].Status == '0'">
           <p>No payment</p>
       </div>

       <div ng-if="details.Payment[0].Status == '1' || details.Payment[0].Status == '2'">
           <p>Late</p>
       </div>

       <div ng-if="details.Payment[0].Status == '3' || details.Payment[0].Status == '4' || details.Payment[0].Status == '5'">
           <p>Some payment made</p>
       </div>

       <div ng-if="details.Payment[0].Status == '6'">
           <p>Late and further taken out</p>
       </div>

       <div ng-if="details.Payment[0].Status != '0' || details.Payment[0].Status != '1' || details.Payment[0].Status != '2' || details.Payment[0].Status != '3' || details.Payment[0].Status != '4' || details.Payment[0].Status != '5' || details.Payment[0].Status != '6'">
           <p>Error</p>
       </div>

    <p>{{ details.Gender}}</p>

</div>

我的应用在尝试显示!=部分时显示错误。

- Oam Psy

---

为什么我的这个回答会被踩？ - Oam Psy

我的猜测是：没有提到错误的具体信息，也没有描述你尝试过什么来解决它。 - ivarni

Answer 1

最好使用ng-switch

<div ng-switch on="details.Payment[0].Status">
    <div ng-switch-when="1">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>

- Charnjeet Singh

---

我最初使用了ng-switch，但是ng-switch不能处理单个switch中的多个表达式，例如ng-switch-when="1" || =2。 - Oam Psy

Answer 2

这里有一个使用filter的巧妙解决方案：

app.filter('status', function() {

  var statusDict = {
    0: "No payment",
    1: "Late",
    2: "Late",
    3: "Some payment made",
    4: "Some payment made",
    5: "Some payment made",
    6: "Late and further taken out"
  };

  return function(status) {
    return statusDict[status] || 'Error';
  };
});

标记：

<div ng-repeat="details in myDataSet">
  <p>{{ details.Name }}</p>
  <p>{{ details.DOB  }}</p>
  <p>{{ details.Payment[0].Status | status }}</p>
  <p>{{ details.Gender}}</p>
</div>

- Ilan Frumer

---

目前在Angular 4中被称为自定义管道：https://angular.io/guide/pipes#custom-pipes - boly38

Answer 3

尝试以下解决方案：

ng-if="details.Payment[0].Status != '0'"

Use below condition(! prefix with true condition) instead of above

ng-if="!details.Payment[0].Status == '0'"

- Mohd Asif

Answer 4

那些在partials中的不必要逻辑，可以简化为像这样的内容，应该在控制器/服务中处理您的数据。

<div ng-repeat="details in myDataSet">

    <p>{{ details.Name }}</p>
    <p>{{ details.DOB  }}</p>
    <p>{{details.Payment[0].StatusName}}</p>
    <p>{{ details.Gender}}</p>

</div>

JS：

angular.forEach(myDataSet.Payment, function (payment) {
  if(payment.Status === 0){
    payment.StatusName = 'No Payment';
  } else if(payment.Status === 1 || payment.Status === 2){
    payment.StatusName = 'Late';
  } else if(payment.Status === 3 || payment.Status === 4 || payment.Status === 5){
    payment.StatusName = 'Some payment made';
  } else if(payment.Status === 6){
    payment.StatusName = 'Late and further taken out';
  }else{
    payment.StatusName = 'Error';
  }
})

- maurycy

---

虽然我同意你关于逻辑的说法，但有时你希望其驻留在模板中，这样可以有条件地加载特定标记。 - Scott Sword

Answer 5

试试这个：

ng-if="details.Payment[0].Status != '6'".

很抱歉，但我认为您可以使用ng-show或ng-hide。

- Alagarasan M

---

@AlguMS - 谢谢，但我不明白这怎么会实现我所要求的。 - Oam Psy

Answer 6

我不喜欢“hack”，但在紧急情况下为了满足截止日期，我曾经这样做过。

<li ng-if="edit === false && filtered.length === 0">
    <p ng-if="group.title != 'Dispatcher News'" style="padding: 5px">No links in group.</p>
</li>

是的，我有另一个嵌套的ng-if，只是不想在一行上写太多条件。

- Tom Stickel

Answer 7

这里有相当不错的解决方案，但它们没有帮助理解问题实际出现的原因。

但其实很简单，您只需要理解逻辑 OR || 的工作方式。整个表达式将在其任一侧评估为true 时评估为true。

现在让我们看看您的情况。假设整个details.Payment [0] .Status是Status ，为了简洁起见，它是一个数字。然后我们有Status != 0 || Status != 1 || ...。

想象一下Status = 1：

( 1 != 0 || 1 != 1 || ... ) =
(  true  || false  || ... ) =
(       true       || ... ) = ... = true

现在想象一下Status = 0:

( 0 != 0 || 0 != 1 || ... ) =
( false  ||  true  || ... ) =
(       true       || ... ) = ... = true

就像你所说的，不管你在...中放什么，只要前两个表达式的逻辑OR为true，整个表达式的结果也将是true。

实际上，你需要的是逻辑AND&&，只有在两边都为true时才会返回true。

- Dmitry Belyaev

Answer 8

现在，使用 ng-switch-when-separator，AngularJS 1.5.10 可以实现这一点。

var app = angular.module("app", []); 

app.controller("ctrl", function($scope) {
    $scope.myDataSet = [{Name: 'Michelle', Gender: 'Female', DOB: '01/12/1986', Payment: [{Status: '0'}]},{Name: 'Steve', Gender: 'Male', DOB: '11/12/1982', Payment: [{Status: '1'}]},{Name: 'Dan', Gender: 'Male', DOB: '03/22/1976', Payment: [{Status: '2'}]},{Name: 'Doug', Gender: 'Male', DOB: '02/02/1980', Payment: [{Status: '3'}]},{Name: 'Mary', Gender: 'Female', DOB: '04/02/1976', Payment: [{Status: '4'}]},{Name: 'Cheyenne', Gender: 'Female', DOB: '07/10/1981', Payment: [{Status: '5'}]},{Name: 'Bob', Gender: 'Male', DOB: '02/16/1990', Payment: [{Status: '6'}]},{Name: 'Bad data', Gender: 'Blank', DOB: '01/01/1970', Payment: [{Status: '7'}]}];
});

<script src="https://code.angularjs.org/1.5.10/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <div ng-repeat="details in myDataSet" ng-switch on="details.Payment[0].Status">

        <p>{{ details.Name }}</p>
        <p>{{ details.DOB  }}</p>

        <div ng-switch-when="0">
            <p>No payment</p>
        </div>

        <div ng-switch-when="1|2" ng-switch-when-separator="|">
            <p>Late</p>
        </div>

        <div ng-switch-when="3|4|5" ng-switch-when-separator="|">
            <p>Some payment made</p>
        </div>

        <div ng-switch-when="6">
            <p>Late and further taken out</p>
        </div>

        <div ng-switch-default>
            <p>Error</p>
        </div>
        
        <p>{{ details.Gender}}</p>

    </div>
</div>

- omikes