17

我有一个简单的 ng-reapt 显示值列表。在一些输出中，我有几个 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>

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

4

8 回答 8

13

最好使用 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>
于 2014-06-13T08:27:58.260 回答
12

这是一个带有过滤器的漂亮解决方案：

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>
于 2014-06-13T10:45:43.650 回答
3

尝试这个：

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

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

于 2014-06-16T11:02:09.500 回答
3

这都是部分不必要的逻辑，将其简化为类似的东西并在控制器/服务中处理您的数据应该在的地方

<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';
  }
})
于 2014-06-13T09:52:05.440 回答
2

尝试以下解决方案

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

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

ng-if="!details.Payment[0].Status == '0'"
于 2016-10-12T17:39:52.810 回答
1

I don't like "hacks" but in a quick pinch for a deadline I have done this

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

Yes, I have another inner nested ng-if, I just didn't like too many conditions on one line.

于 2015-09-01T18:19:30.363 回答
0

从 AngularJS 1.5.10 开始，这现在是可能的，使用ng-switch-when-separator

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>

于 2018-02-19T20:00:35.257 回答
0

There are pretty good solutions here but they don't help to understand why the problem actually happens.

But it's very simple, you just need to understand how logic OR || works. Whole expression will evaluate to true when either of its sides evaluates to true.

Now let's look at your case. Assume whole details.Payment[0].Status is Status and it's a number for brevity. Then we have Status != 0 || Status != 1 || ....

Imagine Status = 1:

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

Now imagine Status = 0:

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

As you it doesn't even matter what you have as ... as logical OR of first two expressions gives you true which will be the result of the full expression.

What you actually need is logical AND && that will be true only if both its sides are true.

于 2016-10-13T01:58:21.743 回答