AngularJS：带有多个复选框的 ng-show答案

【问题标题】：AngularJS : ng-show with multiple checkboxesAngularJS：带有多个复选框的 ng-show
【发布时间】：2013-07-25 04:41:19
【问题描述】：

我已使用以下解决方案（已接受的答案）为我的复选框列表创建了一个新指令：How can I get angular.js checkboxes with select/unselect all functionality and indeterminate values?，并且我想在至少选择一项时显示以下按钮块：

<div class="btn-group pull-right mrr5" data-ng-show="masterChecked">

    <button class="btn btn-danger"><i class="icon-trash"></i> Remove selected</button>
    <button class="btn btn-info"><i class="icon-download icon-white"></i> Export selected as .csv</button>

</div>

如您所见，我正在使用“data-ng-show”属性并为其分配了“masterChecked”，该属性是根据“master”的状态在指令的控制器中设置的：

<input type="checkbox" data-ng-model="master" data-ng-change="masterChange()">

但由于某种原因，我是否检查它 - 按钮不显示。知道我可能做错了什么吗？

这是小提琴：http://jsfiddle.net/scabro/Ahe2X/10/

【问题讨论】：

你有 jsfiddle 或 plunkr 吗？它会帮助我们帮助你:)
@dcodesmith - 是的 - 刚刚在上面的问题中添加了链接。
问题是$scope.masterChecked不属于UserController$scope。所以那里没有定义。它属于directives 控制器
它不必属于 UserController 的范围——它只能驻留在指令内——检查一下：jsfiddle.net/Ahe2X/27
谢谢，我今天学到了一些新东西。我还分叉了它以供将来参考。

标签： angularjs checkbox angularjs-directive ng-show

【解决方案1】：

您似乎只是想检查主控制器中另一个 $scope 变量（指令中的变量）的值

为了拥有相同的属性，您可以将其作为指令中的另一个属性传递

我让你检查一下这个小提琴：http://jsfiddle.net/DotDotDot/Ahe2X/22/

我只是修改了3个小点：

首先，我在主控制器中创建了 masterChecked 值：

cmdApp.controller('UserController', function($scope) {
    $scope.masterChecked=false;
    ....

我们在指令的作用域中添加 masterChecked 值，以便在任何地方都有相同的变量

scope: { checkboxes: '=', masterChecked:"=" },

然后，我们可以用另一个属性调用指令：

<three-state-checkbox checkboxes="users" class="select-all-cb" master-checked="masterChecked">

现在，您正在指令中从主控制器操作 masterChecked 变量，它可以工作:)

【讨论】：

谢谢@DotDotDot - 这是否意味着我必须包含'$scope.masterChecked=false;'在需要此功能的每个控制器中？
这主要取决于您的代码，这里的概念是告诉指令操作控制器中已经创建的值，而不是只在指令的 $scope 中创建的新值。这仅在您的指令在控制器 $scope 可访问的地方调用时才有效（这是master-checked="masterChecked" 的目的，您告诉指令使用当前控制器的 $scope.masterChecked ）。如果它用于另一个控制器，您应该考虑共享 masterChecked 变量，例如在 $rootScope 中（不确定它是否是最佳解决方案）
嗯 - 实际上，看来我不必添加 '$scope.masterChecked=false;'到 'UserController' - 它只能在指令中使用:)：jsfiddle.net/Ahe2X/27

【解决方案2】：

试试这个fiddle。

<div class="btn-group pull-right mrr5" data-ng-show="display">

$scope.cbChange = function () {
    $scope.display = !$scope.display;
}

让我知道这是否适合你，我可以相应地更新它。

【讨论】：

@dccodesmith - 感谢您的示例，但是当您单击主复选框时它不起作用。