Question

我已经构建了我的第一个AngularJS页面，它会检查新访问者并检查列表中的所有活动访问者。该应用程序还允许用户选择任何活动的访问者并编辑/修改他们的信息。但是我的问题是，在修改过程中，我无法控制（根据我的有限理解）。

HTML看起来像这样：

<table>
    <tr>
       <td></td>
        <td><b>Visitor</b></td>
        <td><b>Title</b></td>
        <td><b>Visitee</b></td>
        <td><b>Arrival</b></td>
        <td><b>Departure</b></td>
        <td><b>Status</b></td>
     </tr>
     <tr data-ng-repeat="user in userList">
        <td><a data-ng-click="selectUser(user)">Select</a></td>
        <td>{{user.Visitor}}</td>
        <td>{{user.Title}}</td>
        <td>{{user.Visitee}}</td>
        <td>{{user.Arrival}}</td>
        <td>{{user.Departure}}</td>
        <td><b>{{user.Status}}</b></td>
     </tr>
</table>

以上是表格结构，显示有关已登记访客的信息（还显示具有非活动状态字段的签出访问者）。

有一个＆＃34; Select＆＃34;允许用户选择任何特定访问者的链接，并将其信息填充到可编辑的文本框组中：

<div>
    <div style="display: inline-block;">
        Visitor: 
    </div>
    <div style="display: inline-block; margin-left: 28px; width: 383px;">
        <input type="text" data-ng-model="currentUser.Visitor">
    </div>
</div>
<div style="margin-top: 20px"></div>
<div class="row" style="margin-left: 30px">
    <div style="display: inline-block;">
        Title: 
    </div>
    <div style="display: inline-block; margin-left: 40px;">
        <input type="text" data-ng-model="currentUser.Title">
    </div>
</div>
<div style="margin-top: 20px"></div>
<div class="row" style="margin-left: 30px">
    <div style="display: inline-block;">
        Visitee: 
    </div>
    <div style="display: inline-block; margin-left: 24px;">
        <input type="text" data-ng-model="currentUser.Visitee" >
    </div>
</div>
<div style="margin-top: 20px"></div>
<div class="row" style="margin-left: 30px">
    <div style="display: inline-block;">
        Arrival:
    </div>
    <div style="display: inline-block; margin-left: 25px;">
        <input type="text" data-ng-model="currentUser.Arrival">
    </div>
</div>
<div style="margin-top: 20px"></div>
<div class="row" style="margin-left: 30px">
    <div style="display: inline-block;">
        Departure:
    </div>
    <div style="display: inline-block; margin-left: 0px;">
        <input type="text" data-ng-model="currentUser.Departure">
    </div>
</div>

要签入和结帐访问者，我在html中有以下按钮，可以在我的JavaScript代码中调用各自的功能：

<div>
    <div style="margin: 2% 0 0 8%; display: inline-block">
        <button data-ng-click="addNew(currentUser)" class="btn btn-primary" type="button">Add New Check-in</button>
    </div>
    <div style="margin: 2% 0 0 1%; display: inline-block">
        <button data-ng-click="removeItem(currentUser)" class="btn btn-primary" type="button">Check-out</button>
    </div>
</div>

我的JS文件如下所示：

var app = angular.module('myApp', ['ngTouch', 'ui.grid']);
app.controller('UserController', ['$scope', '$filter', function ($scope, $filter) {
    $scope.selectUser = function (user) {
        $scope.currentUser = user;
    }
    $scope.userList = [
       { Visitor: "John Doe1", Title: "Lawyer", Visitee: "James Smith1", Arrival: "01/01/2016 10:45 AM", Departure: "01/01/2016 12:55 PM", Status: "N"},
       { Visitor: "John Doe2", Title: "Contractor Dude", Visitee: "James Smith2", Arrival: now, Departure: tentative_departureTime, Status: "A" },
       { Visitor: "John Doe3", Title: "Attorney", Visitee: "James Smith3", Arrival: now, Departure: tentative_departureTime, Status: "A" },
       { Visitor: "John Doe4", Title: "Maintenance Guy", Visitee: "James Smith4", Arrival: past_checkinTime, Departure: expired_departureTime, Status: "N" }
    ];
    $scope.addNew = function (currentUser) {      
        var now = new Date();
        var departureTime = new Date(now.getTime() + 2 * 60 * 60 * 1000);
        departureTime = departureTime.format("MM/dd/yyyy, hh:mm tt");
        $scope.currentUser.Arrival = $filter('date')(new Date(), 'MM/dd/yyyy, hh:mm a');
        $scope.currentUser.Departure = $filter('date')(departureTime);
        $scope.currentUser.Status = "Active";
        $scope.userList.push(angular.extend({}, currentUser));
        $scope.currentUser = {}; //clear out Employee object
    };
    $scope.removeItem = function (currentUser) {
        if ($scope.userList.indexOf(currentUser) >= 0) {
            var now = new Date();
            now = now.format("MM/dd/yyyy, hh:mm tt");
            if ($scope.currentUser.Departure > now) {
                $scope.currentUser.Departure = $filter('date')(now);
            }
            $scope.currentUser.Status = "N";
            $scope.currentUser = {}; // clear out Employee object
        }
        else {
            alert("Please select a visitor before atttempting to check-out.");
        }
    };
});

问题是，假设我有一个VisitorA，并且该人员在上午10:00办理登机手续，并且在下午12点被错误地标记为已签出，他们的访问状态设置为＆＃34; N＆＃34; （当前时间是下午12点05分时，未激活）。

我想将结帐时间设置为01:00 PM（暂定，现在是将来）。我想添加一个检查，将状态设置回＆＃34; Active＆＃34;当出发时间设定在将来。我不知道如何改变状态，因为我无法弄清楚＆＃34;编辑＆＃34;正在发生。

Answer 1

我的理解是，您需要一种实时更新用户状态的方法。

使用ES6 Javascript，您可以定义一个具有吸气功能的User类，该类使您可以在每个摘要周期重新计算Status属性，而无需更改视图中的代码。

class User {
    constructor({ Visitor, Title, Visitee, Arrival, Departure } = {}) {
        this.Visitor = Visitor;
        this.Title = Title;
        this.Visitee = Visitee;
        this.Arrival = new Date(Arrival);
        this.Departure = new Date(Departure);
    }
    get Status() {
        return this.Departure > new Date() ? 'A' : 'N';
    }
}

在这里，我们可以简单地调用User.Status，它将即时计算状态。

您的JS会变成类似以下内容（我将大部分计算逻辑保持不变）：

var app = angular.module('myApp', ['ngTouch', 'ui.grid']);
app.controller('UserController', ['$scope', '$filter', function ($scope, $filter) {

    class User {
        constructor({ Visitor, Title, Visitee, Arrival, Departure } = {}) {
            this.Visitor = Visitor;
            this.Title = Title;
            this.Visitee = Visitee;
            this.Arrival = new Date(Arrival);
            this.Departure = new Date(Departure);
        }
        get Status() {
            return this.Departure > new Date() ? 'A' : 'N';
        }
    }

    $scope.userList = [
       new User({ Visitor: "John Doe1", Title: "Lawyer", Visitee: "James Smith1", Arrival: "01/01/2016 10:45 AM", Departure: "01/01/2016 12:55 PM" }),
       new User({ Visitor: "John Doe2", Title: "Contractor Dude", Visitee: "James Smith2", Arrival: now, Departure: tentative_departureTime }),
       new User({ Visitor: "John Doe3", Title: "Attorney", Visitee: "James Smith3", Arrival: now, Departure: tentative_departureTime }),
       new User({ Visitor: "John Doe4", Title: "Maintenance Guy", Visitee: "James Smith4", Arrival: past_checkinTime, Departure: expired_departureTime })
    ];

    $scope.addNew = function () {
        // Note: I removed the currentUser argument from the function call since it 
        // was redundant (we can use $scope.currentUser directly)

        var now = new Date();
        var departureTime = new Date(now.getTime() + 2 * 60 * 60 * 1000);
        departureTime = departureTime.format("MM/dd/yyyy, hh:mm tt");

        var newUser = new User({
            Arrival: new Date($filter('date')(new Date(), 'MM/dd/yyyy, hh:mm a')),
            Departure: new Date($filter('date')(departureTime)),
        });
        $scope.userList.push(newUser);
        $scope.currentUser = {}; // clear out Employee object
    };

    $scope.removeItem = function () {
        // Note: I removed the currentUser argument from the function call since it 
        // was redundant (we can use $scope.currentUser directly)

        if ($scope.userList.indexOf($scope.currentUser) >= 0) {
            var now = new Date();
            now = now.format("MM/dd/yyyy, hh:mm tt");
            if ($scope.currentUser.Departure > now) {
                $scope.currentUser.Departure = new Date($filter('date')(now));
            }
            $scope.currentUser = {}; // clear out Employee object
        }
        else {
            alert("Please select a visitor before atttempting to check-out.");
        }
    };
});

您的HTML保持不变！

我同意这样的意见，即最好通过比较Javascript Date对象而不是字符串来比较日期，因此，我已将示例中的日期转换为Date对象。如果遇到挑战，您可以尝试在User类上实现一些setter和getter方法，这些方法可以让您分配字符串日期值并将其转换为类中的Date对象。

在此处了解有关ES6类的更多信息：https://coryrylan.com/blog/javascript-es6-class-syntax。

请注意，要获得旧版浏览器的支持，您可能需要使用捆绑器（如Webpack和Babel）来转换ES6。

AngularJS - 我想在HTML

1 个答案: