如何根据 ng-change 更新 ng-class？

Question

我有一个 ng-repeat 可以创建多个小部件，每个小部件都有自己的选择下拉菜单。

<div ng-repeat="item in widget.items" class="col-md-6">
    <select ng-model="item.chosenTag"
            ng-change="widget.updateTag(item)"
            ng-class="widget.getButtonClass(item.tag, item.id)">

        <option value="companies"
                ng-selected="{{item.tag == 'companies'}}"
                changed="companies">companies</option>

        <option value="news"
                ng-selected="{{item.tag == 'news'}}"
                changed="news">news</option>

        <option value="people"
                ng-selected="{{item.tag == 'people'}}"
                changed="people">people</option>
    </select>
</div>

加载视图时，ng-class="widget.getButtonClass(item.tag, item.id)" 调用一个函数来检查是否满足 2 个值，然后将 ng-class 设置为 btn-success 或 btn-default。

// This checks the view after load to change the class on each widget select
var vm = this;
vm.getButtonClass = function(tag, id) {

    console.log('in getButtonClass');

    if (tag && id) {
        return 'btn-success';
    } else {
        return 'btn-default';
    }
};

---

接下来，如果用户现在更新任何小部件中的选择，ng-change 将更新为正确的值。

但是我需要以某种方式重新运行ng-class 检查，或者直接将btn-success 添加到选择中，而无需刷新页面。

您将如何完成这项工作？

有没有办法做这样的事情？

ng-class="{ functionToUpdateAll | boolean based on ng-change }"

Answer 1

是否有任何特定原因需要调用该函数？为什么不直接绑定这些变量？

ng-class="'btn-success':item.tag && item.id, 'btn-default': !(item.tag && item.id)"

通过这种方式，您可以利用相互绑定，即每当 item.tag 或 item.id 更改时，都会对类进行相应的评估。

Answer 2

我建议不要调用ng-class中的函数，而是将其分配给一个变量：

<select ng-model="item.chosenTag"
            ng-change="widget.updateTag(item)"
            ng-class="mySelectClass">

并在控制器中的 updateTag 函数中更新该变量：

vm.updateTag = function(item) {

    if (item.tag && item.id) {
        vm.mySelectClass = 'btn-success';
    } else {
        vm.mySelectClass = 'btn-default';
    }
};