CODEWITHSUNDEEP
angularjs
user2092434
user2092434

Reputation:

how to use $document in angularjs to add the inline css?

I want to add one width property to my text by selecting the class name.

$('input.select2-input').css('width', '330px');

Pure angularjs way to do this. Thanks

Upvotes: 0

Views: 547

Answers (3)

Guy
Guy

Reputation: 1444

3 solutions :

1. Using ng-style :

- HTML :

<div ng-style="{ 'width' : width }"></div>

- In your controller :

$scope.width = "330px";

2. Using ng-class :

- HTML :

<div ng-class="{myStyle : myExpression}"></div>

- CSS :

.myStyle {
    width : 330px;
}

- In your controller :

$scope.myExpression = true;

3. Using JQLite :

Angular itself provide JQlite for basic Jquery needs, but for having your code clear, logic, editable this way is really not recommended :

var element = angular.element( document.querySelector('input.select2-input') );
element.css('width', '330px');

Upvotes: 1

user3323654
user3323654

Reputation: 88

In manipulating the DOM use a directive, in the link function. You can inject $document or just get the element in the link function then add css styles.

Upvotes: 0

Stepan Suvorov
Stepan Suvorov

Reputation: 26186

to have Angular-way of doing things use ng-class instead.

Upvotes: 4

Related Questions