AngularJS-在范圍更改時使用if else語句更改變量值

Question

我有一個要在另一個作用域更改其值時更改的變量。

$scope.switch = true;

var thing;
if ($scope.switch == false) {
    thing = "givesFalse";
}
else {
    thing = "givesTrue";
};
this.thingscope = thing;

因此，當我將$scope.switch值更改$scope.switch false時， this.thingscope應該輸出givesFalse 。 為了更改范圍值，我使用ng-click：

<div ng-controller="myCtrl as myCtrl" ng-app="myApp">
    {{myCtrl.thingscope}}
    <br>
    <a ng-click="switch = !switch">{{switch}}</a>   
</div>

但是即使我可以看到范圍確實在更新，可變的thing似乎也不會同時更新。 您可以在這里看到正在工作的朋克。 提前致謝！

Answer 1

您有2個選擇：

0-自動：使用手表

$scope.$watch('switch', function () {
  $scope.thing = $scope.switch ? "givesTrue" : "givesFalse";
});

1-手動：使用自定義功能更改兩個值。

ng-click="switch = !switch"

更改為：

ng-click="customFunction()"

並在控制器中定義：

$scope.customFunction = function () {
  $scope.switch = !$scope.switch;
  $scope.thing = $scope.switch ? "givesTrue" : "givesFalse";
}

Answer 2

要點是，當實例化Controller時，Controller的代碼將僅執行一次。 如果您希望它響應更改，則需要使用$watch 。

$scope.$watch('switch', function(newSwitchValue, oldSwitchValue) {
  if ($scope.switch == false) {
    $scope.thing = "givesFalse";
  }
  else {
    $scope.thing = "givesTrue";
  }
});

在一個實際的應用中，架構和性能都很重要，我建議您直接從ng-click中調用一個函數。

ng-click="onClickSwitch()"

然后在$ scope中定義函數onClickSwitch（） 。

$scope.onClickSwitch = function() {
    $scope.switch = !$scope.switch;
    [code as above]
}