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

【问题标题】：Angularjs show div if other two are not available inside td如果其他两个在 td 中不可用，Angularjs 会显示 div
【发布时间】：2017-01-14 22:11:40
【问题描述】：

我有下表代码，

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，那么我们必须显示第三个div，值为1。否则不需要显示。这意味着前两个有一些条件，条件成功将显示颜色类。如果前两个div 无法显示，我们必须显示第三个div，值为1。请指导我解决此问题。

提前致谢

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案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;
}

【讨论】：

提供一个工作示例来重现此问题。这很简单
我们不会在第三个 div 中重复 matrixData。所以它总是空的。当我包含 ng-repeat matrixData 时，它显示错误。
哦，对了@satheesh。我已经更新了答案。检查是否有效

【解决方案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>

【讨论】：

它不起作用，因为我们没有为第三个 div 重复 LT.leaveTrainingData.matrixData 数组