0

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

Improve this question
3
  • jQlite(built in light version of jQ in angular) doesn't have out of box support for selectors.... so you either use jQ or vanilla js.. Commented Feb 11, 2016 at 10:34
  • 3
    The angular way is not to do it that way at all. Instead make sure that the relevant elements have an ng-style or ng-class attribute that references some value from the model and update the model when you want to change the style/class. Commented Feb 11, 2016 at 10:36
  • @Duncan well said Duncan... well said.. Commented Feb 11, 2016 at 10:39

3 Answers 3

Reset to default
4

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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');
Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.