satheesh satheesh - 3 months ago 7
AngularJS Question

Angularjs show div if other two are not available inside td

I have the following table code,

LT.leaveTrainingData
contains all the data

<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>


If the
td
has no child div then we have to show the third
div
with the value of 1. Otherwise no need to show. It means first two has some conditions it the condition succeed the colors class will be shown. If the first two
div
fails to show the we have to show the third
div
with the value of 1. Please guide me to fix this issue.

Thanks in Advance

Answer

Well, this is damn simple. Just move your ng-if logic to a scope function and call it there:

<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>

And the 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);
};

I miss understood the example. I guess, you can just solve it using the CSS:

.cursPointer {
     display: none;
}

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