如果其他两个在td内不可用，Angularjs会显示div

Question

我有以下表格代码，

LT.leaveTrainingData包含所有数据

<table>
    <tbody>
        <tr ng-repeat="userList in LT.leaveTrainingData.users"> 
            <td class="tdDataColumn"  ng-repeat="daysList in LT.leaveTrainingData.days">
                <div class="cursPointer" ng-click="LT.userLeaveUpdate(userList.userID,userList.userName,daysList.date,matrixData.leaveType)" 
                    ng-repeat="matrixData in LT.leaveTrainingData.matrixData" 
                    ng-class="{tdBlue: matrixData.leaveType == 'PO',
                                 tdGreen: matrixData.leaveType == 'PH',
                                 tdRed: matrixData.leaveType == 'TC'}"
                    ng-if="daysList.leaveType != 'NP' 
                            && daysList.leaveType != 'SD' 
                            && daysList.leaveType != 'SH' 
                            && daysList.leaveType != 'O' 
                            && matrixData.userID == userList.userID 
                            && daysList.date == matrixData.date">&nbsp;
                </div>  
                <div  
                    ng-class="{tdBlue: daysList.leaveType == 'O',
                                 tdYellow: daysList.leaveType == 'SD',
                                 tdOrange: daysList.leaveType == 'SH',
                             tdGrey: daysList.leaveType == 'NP'}"
                    ng-if="(daysList.leaveType == 'NP' 
                        || daysList.leaveType == 'SD' 
                        || daysList.leaveType == 'SH' 
                        || daysList.leaveType == 'O')">&nbsp;
                </div> 
                <div class="cursPointer">
                    1
                </div>
            </td> 
        </tr>
    </tbody>
</table> 

如果td没有子div，那么我们必须显示值为1的第三个div。否则无需显示。这意味着前两个条件有条件，条件成功，颜色类将被显示。如果前两个div未能显示，则我们必须显示值为1的第三个div。请指导我解决此问题。

先谢谢

Answer 1

嗯，这很简单。只需将ng-if逻辑移动到范围函数并在其中调用：

<table>
    <tbody>
        <tr ng-repeat="userList in LT.leaveTrainingData.users">
            <td class="tdDataColumn" ng-repeat="daysList in LT.leaveTrainingData.days">
                <div class="cursPointer"
                     ng-click="LT.userLeaveUpdate(userList.userID,userList.userName,daysList.date,matrixData.leaveType)"
                     ng-repeat="matrixData in LT.leaveTrainingData.matrixData"
                     ng-class="{tdBlue: matrixData.leaveType == 'PO',
                                 tdGreen: matrixData.leaveType == 'PH',
                                 tdRed: matrixData.leaveType == 'TC'}"
                     ng-if="shouldShowFirstDiv(userList, daysList, matrixData)">&nbsp;
                </div>

                <div
                    ng-class="{tdBlue: daysList.leaveType == 'O',
                                 tdYellow: daysList.leaveType == 'SD',
                                 tdOrange: daysList.leaveType == 'SH',
                             tdGrey: daysList.leaveType == 'NP'}"
                    ng-if="shouldShowSecondDiv(daysList)">&nbsp;
                </div>

                <div class="cursPointer" ng-if="shouldShowThirdDiv(userList, daysList, matrixData)">
                    1
                </div>
            </td>
        </tr>
    </tbody>
</table>

和JS：

// Name it properly, I'm just using it for simplicity
$scope.shouldShowFirstDiv = function (userList, daysList, matrixData) {
    return daysList.leaveType != 'NP'
            && daysList.leaveType != 'SD'
            && daysList.leaveType != 'SH'
            && daysList.leaveType != 'O'
            && matrixData.userID == userList.userID
            && daysList.date == matrixData.date;
};

$scope.shouldShowSecondDiv = function (daysList) {
    return daysList.leaveType == 'NP'
            || daysList.leaveType == 'SD'
            || daysList.leaveType == 'SH'
            || daysList.leaveType == 'O';
};

$scope.shouldShowThirdDiv = function (userList, daysList, matrixData) {
    return !$scope.shouldShowFirstDiv(userList, daysList, matrixData) && !$scope.shouldShowSecondDiv(daysList);
};

<击>

我想念这个例子。我想，您可以使用CSS解决它：

.cursPointer {
     display: none;
}

td .cursPointer:only-child {
      display: block;
}

Answer 2

你可以试试这个（虽然没有经过测试）??

  <div class="cursPointer" ng-if="!(daysList.leaveType == 'NP' 
                                    || daysList.leaveType == 'SD' 
                                    || daysList.leaveType == 'SH' 
                                    || daysList.leaveType == 'O') && (!LT.leaveTrainingData.matrixData || (LT.leaveTrainingData.matrixData && LT.leaveTrainingData.matrixData.length == 0))">
                                    1
                                </div>