我有下表代码,
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">
</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')">
</div>
<div class="cursPointer">
1
</div>
</td>
</tr>
</tbody>
</table>
如果 td
没有子 div,那么我们必须显示值为 1 的第三个 div
。否则不需要显示。这意味着前两个有一些条件,如果条件成功,颜色类将被显示。如果前两个 div
无法显示,我们必须显示值为 1 的第三个 div
。请指导我解决此问题。
提前致谢
最佳答案
嗯,这太简单了。只需移动您的 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)">
</div>
<div
ng-class="{tdBlue: daysList.leaveType == 'O',
tdYellow: daysList.leaveType == 'SD',
tdOrange: daysList.leaveType == 'SH',
tdGrey: daysList.leaveType == 'NP'}"
ng-if="shouldShowSecondDiv(daysList)">
</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;
}
关于javascript - 如果其他两个在 td 中不可用,则 Angularjs 显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39366175/