javascript - javascript + angularjs 中的开始和停止时间

Question

我正在构建员工工作跟踪应用程序，我在 UI 中有一个开始和停止按钮。

我的 Jade 代码:

td.table-icon-cell
    a.btn.btn-primary(type='button' href='',ng-click='stop();' ng-if="start.active")
      i.fa.fa-stop(aria-hidden='true')   Stop 
    a.btn.btn-primary(type='button' href='',ng-click='start();' ng-if="!start.active")
       i.fa.fa-clock-o(aria-hidden='true')   Start  

controllers.js:

$scope.start = function () {
    $scope.time = {
        start : moment(new Date()),
        stop : ''
    }
    $scope.start.active = true;
    $http.post('/api/timestart', $scope.time).then(function (response) {
            $scope.savetimes = response.data;
        });
}

$scope.stop = function () {
    $scope.start.active = false;
    $scope.time = {
        start: '',
        stop: moment(new Date())
    }
    $http.post('/api/timestop', $scope.time).then(function (response) {});
}

例如:

我是一名员工，我按下开始按钮，然后它变成了“停止”按钮，这很好，但如果我加载我的页面，我又想要“停止”按钮，但它从一开始就显示“开始”。

Answer 1

我认为可能存在两个问题。

首先，您需要初始化您的变量。您只需在 Controller 中编写 $scope.start.active = false; 即可。例如:

app.controller('your_controller', function($scope, $http) {
  ...
  $scope.start.active = false;
  ...
  $scope.start = function () {...}
  $scope.stop = function () {...}
});

这样，当您重新加载页面时，您的值将始终为 false。 (或者您可以根据需要将其设置为 true)

---

其次，我相信您有一个错误。您的函数 start() 与您的变量 start(或$scope.start )。这可能会破坏您的 ng-if 逻辑。例如:

start = function(){}
console.log(!start.anything);

在这个例子中(如果你运行它)你会看到如果你把一个函数当作一个具有一些属性的对象，它会返回 true 因为 ! of undefined 为真。

因此在您的示例中，ng-if="!start.active" 的计算结果为 true，因此它会显示 "Start"。

要修复它，您只需重命名您的变量，使它们不再相互匹配。