ng-click 中的角度切换变量不起作用

Question

我有一个列出客户的表格，对于也有客户列表的客户，允许用户单击表格行以显示该列表。 HTML 如下所示：

        <tbody ng-repeat ="item in customers | clientSettingsFilter:customerId">
            <tr ng-class="{'row-hover': item.clientSettings.length>0}" ng-click="item.showClients=!item.showClients">
                <td><span ng-class="{true:'glyphicon glyphicon-chevron-down', false:'glyphicon glyphicon-chevron-right'}[item.showClients]"  ng-hide="item.clientSettings.length==0"></span></td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td><button type="button" class="btn btn-default btn-xs" ng-click="go('/client-config/defaults/'+item.id)">Defaults</button></td>
            </tr>
            <tr ng-show="item.showClients">
                 ..... // client data

我的奇怪行为是这样的：

如果我在客户数据集中未定义“showClients”属性，一切都会按预期工作，除了 V 形图标一开始没有显示。单击一次后，它会显示并且切换按预期工作。我在想这可能是因为 ng-class 正在寻找 true 或 false，而 undefined 不满足其中任何一个。

如果我将 showClients 属性预定义为 true 或 false，则 V 形在页面加载时正确显示并且客户端列表正确显示，但切换不再起作用，就好像 ng-click 没有做任何事情或某些原因无法更改该值。我不确定如何调试这样的内联指令。

编辑

根据请求，这是来自控制器的相关代码：

filter('clientSettingsFilter', function () {
    return function (customers, customerId) {
        var filtered = [];

        if (!customerId)
            return filtered;

        customerId = customerId.toLowerCase();

        angular.forEach(customers, function (item) {
            if (item.id.toLowerCase().indexOf(customerId) !== -1) {

                // format some text properties, omitted for brevity

                // if this line is uncommented, the ng-click does not work
                //item.showClients = false;
                filtered.push(item);
            }
        });

        return filtered;
    };
});

Answer 1

您在ng-class 中使用的条件只会在值为true 或false 时添加内容，而不是在undefined 时添加内容。

改为使用更冗长的三元运算符：

ng-class="item.showClients ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'"

还不如将glyphicon类移到普通的class属性：

class="glyphicon"

演示： http://plnkr.co/edit/bxgp4HyFkOygc0foxAKN?p=preview

您在过滤器中取消注释 item.showClients = false; 时看到的行为是由于摘要循环的工作方式。

如果item.showClients 是false 并且您单击tr 将发生以下情况（有点简化）：

1. ng-click 中的表达式将执行，将item.showClients 设置为true
2. 摘要循环将开始
3. 过滤器将运行并再次将item.showClients 设置为false

过滤器是用来过滤的，不是用来修改的。

还请注意，当使用带有ng-repeat 的过滤器时，它会触发每个摘要循环，并且由于每个摘要循环由多个摘要循环（至少两个）组成，因此保持过滤器简单很重要，否则它们会对性能。