Question

我有一些字段，可以编辑它们。用户可以使用按钮取消编辑模式＆＃39;取消＆＃39;：

<button ng-click="cancelEdit();" ng-show="editable">
    <i class="fa fa-remove"></i> Cancel
</button>

事件ng-click调用函数cancelEdit()。

$scope.cancelEdit = function(){
    $scope.editable=false;
    $scope.jobNameInput = $scope.jobToView.name;
    $scope.selectedPriority = $scope.jobToView.priority;
    $scope.jobCommentsInput = $scope.jobToView.comments;
}

在这个函数中，我只想将编辑模式的布尔变量设置为false，并将输入值重新设置为默认值（在编辑模式之前）。调用此函数后，将更新控制器的值，但不会在我的视图中更新：

<button ng-click="editable=true;" ng-show="!editable">
    <i class="fa fa-edit"></i> Edit
</button>

当变量editable设置为false时，会显示此按钮。所以当我点击取消按钮时，理论上，必须显示按钮编辑，我的输入应该更新。为什么不是这样？

Answer 1

基元是不可变的 - 即无法通过调用其上的函数来更改其值。

您的$scope.editable是boolean变量，它是原始的。这就是视图无法更新的原因。它的值只在函数闭包时才会改变。

要在视图中应用它，您应将其更改为非原始值。如果将其设置为对象的属性，则可以执行此操作。

E.g。

$scope.isEditable = {
  value:false
}

然后玩弄那个物体。在你的情况下：

取消按钮：

<button ng-click="cancelEdit();" ng-show="isEditable.value">
    <i class="fa fa-remove"></i> Cancel
</button>

修改按钮：

<button ng-click="isEditable.value=true;" ng-show="!isEditable.value">
    <i class="fa fa-edit"></i> Edit
</button>

功能：

$scope.cancelEdit = function(){
    $scope.isEditable.value = false;
    $scope.jobNameInput = $scope.jobToView.name;
    $scope.selectedPriority = $scope.jobToView.priority;
    $scope.jobCommentsInput = $scope.jobToView.comments;
}

Answer 2

感谢Korte对布尔变量的回答。为了完成，关于输入，我找到了我的问题的答案。只需在控制器中声明：var vm = this;;

简单地说，在输入模型中，写下：ng-model="vm.jobCommentsInput"

我认为输入被认为是我的布尔变量，它们需要是对象。

我的控制器中的功能有效，但不更新视图（Angularjs）

2 个答案: