有条件地添加类，然后将其永久设置为Angular

Conditionally Adding Class then Setting it Permanently in Angular

本文关键字：设置 Angular 添加 然后 有条件      更新时间：2023-09-26

这可能是一个奇怪的问题，但如果我所问的是可能的，它对我来说会很有用。有没有一种方法可以使用条件语句设置一个类，然后将该类冻结到元素上？

这就是我想做的——如果一个元素的文本值为'somestring[A]'，我想根据最后三个字符将这个元素设置为类greenify的样式。然后，我想将字符串的值更改为'somestring'，并保留greenify类。请注意，我知道我可以以不同的方式显示此字符串，但对于我的情况，实际更改字符串是更可取的。

我有一种方法可以在脑海中实现这一点，但如果有一种有角度的方法，它会更干净、更清晰。如有任何帮助，我们将不胜感激。

我想问题是，在初始更改之后，是否需要更改类的值？如果没有，你可以在值上设置一个自定义手表，然后在更改后取消观看。通过取消查看它，类绑定不会在DOM中更新。

var unWatch = $scope.$watch('myVar', function() {
  // set class on element
  unwatch();
});

如果需要再次更新值并设置类，则可以在需要时重新添加监视和取消监视。

以下是我使用指令为自定义环境提出的解决方案。我希望它能帮助到别人。

.directive('colorByChange', function(){
    return {
        scope: {test: '=passedValue'},
        link: function(scope, element){
            element.ready(function(){
                var txt = scope.test;
                switch (txt.slice(-3, txt.length)) {
                    case '[A]':
                        element.addClass('greenify');
                        element.text(scope.test.slice(0, -3));
                        break;
                    case '[U]':
                        element.addClass('bluify');
                        element.text(scope.test.slice(0, -3));
                        break;
                    case '[D]':
                        element.addClass('redify');
                        element.text(scope.test.slice(0, -3));
                        break;
                }
            });
        }
    }
});

HTML

<span ng-repeat="handle in brand.handles" color-by-change passed-value="handle">
  {{handle}}
</span>
相关文章：