Question

我想在ng-class中应用多个条件，因此上限是＆＃39; u.Credit＆＃39;将会说10000.这是我的代码：

<tr ng-repeat="u in user.tables.tbl1" ng-init="u.DateAdded = JSONtoDATE(u.DateAdded)" ng-class='{lastRow : $last}' ng-model="myIndex = $index">
  <td>{{u.ID}}</td>
  <td>{{u.Name}}</td>
  <td>{{u.Email}}</td>
  <td>{{u.DateAdded}}</td>
  <td ng-class='{selectedRow : u.Credit >= creditValue}'>{{u.Credit}}</td>
</tr>

......我尝试过这样的事情，但它没有工作：

<td ng-class='{selectedRow : ((u.Credit >= creditValue) && (u.Credit < 10000))}'>{{u.Credit}}</td>

Answer 1

您可以使用控制器上的函数调用替换它：

<td ng-class='getClassForCurrentRow(u)'>{{u.Credit}}</td>

我不确定creditValue是什么以及填充的位置，如果它来自控制器，那么您不需要新参数，如果没有，则将其添加到函数getClassForCurrentRow(u, creditValue)。

在你的控制器中定义类：

{...}
$scope.getClassForCurrentRow = function(record) {
   if (record.Credit >= $scope.creditValue) {
      return "selectedRow";
   }
   return "";
}

小心保持此功能尽可能简单，因为Angular会在每个周期运行它以确定是否有更改。

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>MCQ Questions</title>
</head>
<body>
<?php
    session_start();
?>
<form method="post" action="uploadQuestion.php" enctype="multipart/form-data">
    <p> Enter the question :</p> <input name="question" type="text"> <br><br>
    <?php
    if (isset($_SESSION['quetype']))
    {
        echo $type = $_SESSION["quetype"]; ?>
        Select Rank :
        <select name="types" id="types">
            <option value=""> Select Rank</option>
            <option name="type" id="t1" value="1" <?=($type==1?"selected":"");?>> Apprentice </option>
            <option name="type" id="t2" value="2" <?=($type==2?"selected":"");?>> Volume 1 CDC </option>
            <option name="type" id="t3" value="3" <?=($type==3?"selected":"");?>> Volume 2 CDC Video</option>
            <option name="type" id="t4" value="4" <?=($type==4?"selected":"");?>> Volume 3 CDC Video</option>
            <option name="type" id="t5" value="5" <?=($type==5?"selected":"");?>> Volume 4 CDC Video</option>
            <option name="type" id="t6" value="6" <?=($type==6?"selected":"");?>> Volume 5 CDC</option>
        </select> <br><br>
    <?php
    }
    else {
    ?>

        Select Rank :
        <select name="types" id="types" onchange="getValue(this)">
        <option value=""> Select Rank</option>
            <option name="type" id="t1" value="1"> Apprentice </option>
            <option name="type" id="t2" value="2"> Volume 1 CDC </option>
            <option name="type" id="t3" value="3"> Volume 2 CDC Video </option>
            <option name="type" id="t4" value="4"> Volume 3 CDC Video </option>
            <option name="type" id="t5" value="5"> Volume 4 CDC Video </option>
            <option name="type" id="t6" value="6"> Volume 5 CDC </option>
        </select> <br><br>
    <?php
    }
    ?>
    Select chapter :
    <select name="chapters" id="chapters">
        <option value="">Select chapter</option>
    </select> <br><br>
    <p> Enter options :</p>
    Enter option A : <input name="opt1" type="text"> <br><br>
    Enter option B : <input name="opt2" type="text"> <br><br>
    Enter option C : <input name="opt3" type="text"> <br><br>
    Enter option D : <input name="opt4" type="text"> <br><br>
    Select correct answer :
    <select name="ans" id="type">
        <option value="">Select answer...</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
    </select>
    <br><br>
    <input type="submit" value = "Submit">
 
</form>
</body>
</html>

Answer 3

我向大家道歉，我在测试代码（我是JS初学者）中犯了一点错误，这些代码对所需的功能产生了负面影响，在纠正之后我不得不说我声称的表达方式不是 - 工作＆＃39;实际上是在工作：

selectedRow : (u.Credit >= creditValue && u.Credit < 10000)

然而，作为我的学习者，你的答案对我来说非常有价值。谢谢。

Answer 4

对于ng-class中的多个条件，最好在控制器中创建一个函数，该函数对ng-class中的selectedRows返回true或false。如下所示：

{...}
$scope.getSelectedRow = function(record, creditValue) {
   if ( record.Credit >= creditValue && record.Credit < 10000) {
      return true;
   }
   return false;
}

将其称为：

<td ng-class='getSelectedRow(u,creditValue)'>{{u.Credit}}</td>

Answer 5

尝试如下..

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<style>
.selectedRow{
color:#987789;
font-size:30px;
}
.unSelectedRow{
color:#234567;
font-size:30px;
}
</style>
<body ng-app="" ng-init="Credit = 10;creditValue=9;">
<p ng-class="{true: 'selectedRow', false: 'inactive'}[Credit >= creditValue]">Value : {{Credit}}</p>
<p ng-class="{false: 'unSelectedRow'}[Credit < creditValue]">Value : {{Credit}}</p>

</body>

ng-class多重条件

5 个答案: