javascript - Angular JS - 更改一个作用域状态并将其余作用域设置为 false 的最佳方法

Question

假设我的 View 中有 4 个字段，我想在单击时打开/关闭这些字段，同时关闭其他三个字段。

<div class="square red"></div>
<div class="square blue"></div>
<div class="square yellow"></div>
<div class="square green"></div>

为了实现这一目标，我所做的是添加一个 ng-class，每当在该字段中完成 ng-click 时就会触发该类。所以 View 会是这样的:

<div class="square red" ng-class="{'open':redSquare == true}" ng-click="clickRedSquare()"></div>
<div class="square blue" ng-class="{'open':blueSquare == true}" ng-click="clickBlueSquare()"></div>
<div class="square yellow" ng-class="{'open':yellowSquare == true}" ng-click="clickYellowSquare()"></div>
<div class="square green" ng-class="{'open':greenSquare == true}" ng-click="clickGreenSquare()"></div>

在我的 Controller 中我会有这样的东西:

$scope.redSquare = true;
$scope.clickRedSquare = function() {
    $scope.redSquare = !$scope.redSquare;
    $scope.blueSquare = false;
    $scope.greenSquare = false;
    $scope.yellowSquare = false;
};
$scope.clickBlueSquare = function() {
    $scope.redSquare = false;
    $scope.blueSquare = !$scope.blueSquare;
    $scope.greenSquare = false;
    $scope.yellowSquare = false;
};
$scope.clickGreenSquare = function() {
    $scope.redSquare = false;
    $scope.blueSquare = false;
    $scope.greenSquare = !$scope.greenSquare;
    $scope.yellowSquare = false;
};
$scope.clickYellowSquare = function() {
    $scope.redSquare = false;
    $scope.blueSquare = false;
    $scope.greenSquare = false;
    $scope.yellowSquare = !$scope.yellowSquare;
};

我想问 Angular 中最好的方法是什么(如果有的话)，以避免重复的代码。你可以看到工作plunkr here 。提前致谢!

Answer 1

如果你想为每个方 block 保留单独的变量，你可以这样做:

$scope.clickSquare = function(name) {
    ["redSquare",
     "blueSquare",
     "greenSquare",
     "yellowSquare"].forEach(function(e) {
        $scope[e] = (e === name) ? !$scope[e] : false;
     });
}

然后只需使用参数调用此方法ng-click="clickSquare('redSquare')"

Updated Plunker