wake-up-neo.net

ng-wenn nicht gleich?

Ich habe ein einfaches ng-reapt, das eine Liste von Werten anzeigt. Bei einigen Ausgaben habe ich ein paar ng-if, um DIVs anzuzeigen/auszublenden.

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>

Meine Anwendung zeigt einen Fehler an, wenn versucht wird, den Abschnitt != anzuzeigen.

14
Oam Psy

Es ist besser, ng-switch zu verwenden

<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>
13
Charnjeet Singh

Hier ist eine clevere Lösung mit einem 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';
  };
});

Markup:

<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>
12
Ilan Frumer

Das ist alles unnötige Logik in Teilbereichen. Reduzieren Sie es auf so etwas und verarbeiten Sie Ihre Daten im Controller/Service, wo sie sein sollten

<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';
  }
})
3
maurycy

Versuche dies:

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

Tut mir leid, aber ich denke, Sie können ng-show oder ng-hide verwenden.

3
Alagu MS

Versuchen Sie die Lösung unten

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

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

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

Ich mag keine "Hacks", aber in einer kurzen Frist für eine Deadline habe ich dies getan

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

Ja, ich habe ein weiteres inneres verschachteltes ng-if, ich mag einfach nicht zu viele Bedingungen in einer Zeile. 

1
Tom Stickel

Hier gibt es ziemlich gute Lösungen, aber sie helfen nicht zu verstehen, warum das Problem tatsächlich auftritt.

Aber es ist sehr einfach, Sie müssen nur verstehen, wie die Logik OR || funktioniert. Der gesamte Ausdruck wird zu true ausgewertet, wenn eine seiner Seiten zu true ausgewertet wird.

Nun schauen wir uns Ihren Fall an. Angenommen, der ganze details.Payment[0].Status ist Status und ist eine Zahl für die Kürze. Dann haben wir Status != 0 || Status != 1 || ....

Stellen Sie sich Status = 1 vor:

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

Stellen Sie sich jetzt Status = 0 vor:

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

Da Sie nicht wissen, was Sie als ... als logische OR der ersten beiden Ausdrücke haben, erhalten Sie true, die das Ergebnis des vollständigen Ausdrucks ist.

Was Sie wirklich brauchen, ist logisch AND&&, das nur dann wahr ist, wenn beide seine Seiten true sind.

0
Dmitry Belyaev

Dies ist jetzt ab AngularJS 1.5.10 mit ng-switch-when-separator möglich.

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>

0
omikes