Как использовать ng-стиль с! Важно?

Кнопка тега уже имеет назначенный курсор css. Я хочу переопределить курсор css в соответствии с is_active значениями, чтобы отключить кнопку. is_active может иметь значения 0 или 1. Ниже приведен код для js/html, пожалуйста, дайте мне знать правильный метод, чтобы применить курсор css к кнопке.Как использовать ng-стиль с! Важно?

$scope.ngStyleDisabled = function(status) { 
 
    if (status == 1) { 
 
    return {}; 
 
    } else if (status == 0) { 
 
    return '{\'cursor\':\'not-allowed !important\',\'pointer-events\':\'none\'}'; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<button ng-style="{{ngStyleDisabled(item.is_active)}}">Action Button</button>

источник

2015-09-16 Nishant

Согласно documentation вашего выражения должен быть объект:

Выражение, которое Evals к объекту, чьи ключи имена и значения стилей CSS являются соответствующие значения для тех, CSS-ключи.

Попытка возвращения объекта вместо строки (с помощью quoutes, так как свойства CSS не могут быть действительными ключи):

$scope.ngStyleDisabled = function(status) { 
    if (status == 1) { 
    return {}; 
    } else if (status == 0) { 
    return { 
     'cursor': 'not-allowed', // !important does not work in ng-style 
     'pointer-events': 'none' 
    }; 
    } 
}

Кроме того, оставить в фигурные скобки в шаблоне:

<button ng-style="ngStyleDisabled(item.is_active)">Action Button</button>

Этот JSFiddle показывает, как свойства применяются к кнопке.

ПРИМЕЧАНИЕ Согласно этому question и этот GitHub issue, тем !important ключевое слово не поддерживается в пределах ng-style директивы. Вы можете найти обходные пути за ссылками.

источник

2015-09-16 07:57:04 muenchdo

попробовал ваш код, возвращаемый результат в <нг-стиле кнопки = "{" Курсор ":" не разрешенным важен "" pointer-events ":" none "}"> Action Button – Nishant

Разве это не то, что вы хотели? – muenchdo

Возвращаемые значения с двойными кавычками не в одинарных кавычках. – Nishant

ng-style не поддерживает !important.

Таким образом, альтернативный вариант заключается в использовании ng-class вместо ng-style, он решит проблему.

Если вы хотите использовать ng-style, то попробуйте написать в самом html-файле, пожалуйста, не пытайтесь писать в любой функции.

источник

2016-05-26 09:33:13

Самое элегантное обходное решение, упомянутое в https://github.com/angular/angular.js/issues/5379, работало для меня!

Пример (написанный на нефритовом/МОПСЕ):

a#share-test-link.item(ng-show="iAmTeamCreator()", href="", data-ng-attr-style="{{iAmTeamCreator() && 'display: block!important' || ''}}")

источник

2016-09-05 06:59:01

Как использовать ng-стиль с! Важно?

ответ

Смежные вопросы