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中调用该函数，只需将其分配给变量：

<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';
    }
};

Answer 2

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

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

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

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

2 个答案: