javascript - 如果其他两个在 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;
}