Question

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

我的玉代码：

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') &nbsp; Stop 
    a.btn.btn-primary(type='button' href='',ng-click='start();' ng-if="!start.active")
       i.fa.fa-clock-o(aria-hidden='true') &nbsp; 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

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

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

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

这样，当您重新加载页面时，它的值始终为false。（或者，如果您愿意，可以将其设置为true）

其次，我相信你有一个 bug 。您的功能 start()与变量 start（或$scope.start）具有相同的名称。这可能会破坏您的ng-if逻辑。例如：

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

在此示例中（如果您运行它），您将看到如果将某个函数视为具有某些属性的对象，它将返回true，因为!的{{1}}为真。

因此，在您的示例undefined中评估为true，因此显示“开始”。

要解决此问题，您只需要重命名您的变量，以便它们不再相互匹配。

javascript + angularjs

1 个答案: