Display alert message based on group sum in AngularJS

mahesh213
 
on Feb 10, 2020 04:47 AM
Sample_111630.zip
1023 Views

Hi,

I have 2 fields Date and Duration

currently my requirement is that if the sum of duration on that particular date exceed more than 9 hrs need to dispaly alert message else dispaly success alert message

ex:

Date     Duration

1/1/2019   9

1/1/2019     2

in this instance display valid message 

could you please help me

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Details = [{ Name: 'mahesh' }, { Name: 'mukesh'}];
            $scope.Save = function () {
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Duration</th>
        </tr>
        <tbody ng-repeat="detail in Details">
            <tr>
                <td><input type="date" ng-model="detail.Date" /></td>
                <td>
                    <input type="text" ng-model="detail.Duration" ng-change="GetMaxLength(detail,$index)" />
                </td>                
            </tr>
        </tbody>
    </table>
    <br />
    <button ng-click="Save()">Save</button>
</body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Feb 10, 2020 04:48 AM

Hi mahesh213,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Details = [{ Date: '1/1/2019', Duration: '5' }, { Date: '1/1/2019', Duration: '2' }, { Date: '1/2/2019', Duration: '9'}];
            $scope.GetMaxLength = function (timesheet, index) {
                var duration = 0;
                angular.forEach($scope.Details, function (date, key) {
                    if (date.Date == timesheet.Date) {
                        duration += parseInt(date.Duration == '' ? 0 : date.Duration);
                    }
                });
                if (duration >= 9) {
                    $window.alert("Invalid");
                } else {
                    $window.alert("Valid");
                }
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Date</th>
            <th>Duration</th>
        </tr>
        <tbody ng-repeat="detail in Details">
            <tr>
                <td><input type="text" ng-model="detail.Date" /></td>
                <td><input type="text" ng-model="detail.Duration" ng-change="GetMaxLength(detail,$index)" /></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Demo