AngularJS-我想对我的HTML中的可编辑字段实施if-check

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>

上面的表格结构显示有关签入访客的信息（还显示带有非活动状态字段的签出访客）。

有一个“选择”链接，该链接允许用户选择任何特定的访问者，并将他们的信息填充到可编辑的文本框组中：

<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 AM签入，并且被错误地标记为12:00 PM签出，他们的访问状态设置为“ N”（未激活）当前时间是12:05 PM。

我想将结帐时间设置为01:00 PM（暂定，因为现在是将来）。 我想添加一张支票，该支票将在将来设置出发时间时将状态重新设置为“有效”。 我不确定如何更改状态，因为我无法弄清楚“编辑”的位置。

Answer 1

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

使用ES6 Javascript，您可以定义一个User类，该类具有一个getter函数，使您可以在每个摘要周期重新计算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。