Угловой стиль ng с несколькими условными выражениями и несколькими атрибутами стиля

Question

Угловой стиль ng с несколькими условными выражениями и несколькими атрибутами стиля

0

Я хочу добавить несколько атрибутов стиля для группы аккордеона, используя ng-style с условиями, поскольку ng-class не работает с аккордеон.

Вот как я пытаюсь:

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none' }"

это работает нормально. но также хотите добавить border-color.

Я попробовал это:

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none', border-color: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid  ? 'red' : 'none'}"

но это дает мне ошибку разбора.

Я также пробовал эту, но такую же ошибку синтаксического анализа:

ng-style="ivrMessageForm.ivr_messagetitle.$error.required ? {border:'3px solid', border-color: 'red'} : {border:'none', border-color: 'none'}"

может ли кто-нибудь помочь мне добавить несколько атрибутов стиля с несколькими условиями, используя ng-стиль.

Sony Khan 22 июль 2016, в 12:24

Источник

0

см. это: stackoverflow.com/questions/29435883/…
chirag 22 июль 2016, в 10:33

Теги:

html

angularjs

css

2 ответа

1

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
	$scope.styleobj = {};
  $scope.borderflag = true;
  $scope.widthflag = true;
  $scope.getStyle= function(){  
     if($scope.borderflag){
				$scope.styleobj.border = '2px solid';
     }if($scope.widthflag){
     		$scope.styleobj.width = '100%';
        $scope.styleobj.font = 'italic bold 12px/30px Georgia, serif';
     }
     console.log($scope.styleobj);
     return $scope.styleobj;
  }
	
    $scope.name = 'Arindam Banerjee';
    
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  Hello, {{name}}!
  <p ng-style="getStyle()">
   Hello, {{name}}!
  </p>
</div>

##

Arindam Banerjee 22 июль 2016, в 08:42

Ещё вопросы

TTCC · Accepted Answer · 2016-07-22T07-38-00.000Z

Вы должны добавить одинарные кавычки в 'border-color'

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none', 'border-color': ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid  ? 'red' : 'none'}"

одинарная кавычка необходима для всех следующих атрибутов?
А что если я хочу добавить тот же стиль на $ error.pattern?
Зависит от имени атрибута. Это не знание angularjs, а javascript. Если имя свойства содержит более одного слова, вы должны написать его в формате «горб» или использовать кавычки. Это означает, что вы также можете изменить 'border-color' на borderColor.
Вы можете оптимизировать это. Предположим, мы определили стиль в файле js как $ scope.css = {border: '3px solid', 'border-color': 'red'} Как я могу передать эту переменную css в стиле ng с условием?