web-dev-qa-db-fra.com

ng-if, pas égal à?

J'ai un simple ng-reapt qui affiche une liste de valeurs .. Sur certaines sorties, j'ai quelques ng-if pour afficher/cacher les 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>

Mon application affiche une erreur lors de la tentative d'affichage de la section !=.

angularjsangularjs-scopeangularjs-ng-repeatng-switchangular-ng-if
14
Oam Psy

Il vaut mieux utiliser 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>
13
Charnjeet Singh

Voici une solution astucieuse avec un filtre:

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

Balisage:

<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

C'est toute la logique inutile dans les partiels, réduisez-le à quelque chose comme ceci et traitez vos données dans le contrôleur/service où elles devraient être

<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

Essaye ça:

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

Désolé, mais je pense que vous pouvez utiliser ng-show ou ng-hide.

3
Alagu MS

Essayez la solution ci-dessous

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

Je n'aime pas les "hacks", mais je me suis vite mis à cela

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

Oui, j'ai un autre ng imbriqué, je n'aimais pas trop de conditions sur une ligne. 

1
Tom Stickel

Il existe de très bonnes solutions ici, mais elles ne permettent pas de comprendre pourquoi le problème se produit réellement.

Mais c'est très simple, il vous suffit de comprendre comment fonctionne la logique OR ||. L'expression entière sera évaluée à true lorsque l'un de ses côtés sera évalué à true.

Maintenant, regardons votre cas. Supposons que details.Payment[0].Status entier est Status et qu’il s’agit d’un numéro abrégé. Ensuite, nous avons Status != 0 || Status != 1 || ....

Imaginez Status = 1:

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

Maintenant, imaginez Status = 0:

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

En tant que vous, peu importe ce que vous avez sous la forme ... car OR logique des deux premières expressions vous donne true qui sera le résultat de l'expression complète.

Ce dont vous avez réellement besoin est AND&& logique qui ne sera vrai que si les deux ses côtés sont true.

0
Dmitry Belyaev

Ceci est maintenant possible à partir de AngularJS 1.5.10, en utilisant 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>

0
omikes