CODEWITHSUNDEEP
javascriptjqueryangularjs
user3370006
user3370006

Reputation: 11

How to change the content of an Angular field textarea using jQuery

I am trying to change the color of a textarea in an Angular app using jQuery but it does not work.

What should I do? It says $ is not defined. HTML:

<body>
     <div ng-app="myApp" ng-controller="testController">
        <textarea id="abc">abc
          </textarea>

     </div>
</body>
</html>

Angular js:

 var app = angular.module('myApp', []);
 app.controller('testController', function($scope, $http) {    
      var tdVal =$("#abc");
      var x = tdVal.innerHTML;
      tdVal.html ("<span style='color: rgba(220, 0, 0, 1)'>" + x"</span>");
});

Upvotes: 1

Views: 209

Answers (3)

Andriy
Andriy

Reputation: 15442

it looks like you want to render HTML within textarea tag, which is not allowed by browsers, but what you can do is to use editable div element:

<div id="abc" contenteditable="true"></div>

check out Rendering HTML inside textarea

angular.element by default uses jQueryLight which is limited version og jQuery. You should use ng-style angular directive:

<div id="abc" contenteditable="true">
  <span ng-style="{color: 'rgba(220, 0, 0, 1)'}">abc</span>
</div>

or you can assign to ng-style your custom function which will return CSS object, according to your logic.

Upvotes: 0

Leonid Z
Leonid Z

Reputation: 161

Try this, it does work if there are not some other dependincies:

$('#abc').css('color', 'rgba(220, 0, 0, 1)');

Upvotes: 0

Farooq Ahmed Khan
Farooq Ahmed Khan

Reputation: 4094

You are not just changing color, but the control itself. If changing color is the intent:

var elem = angular.element('#abc');
elem.css('color', 'rgba(220, 0, 0, 1)');

for value update, angular provides you bind directive.

$scope.value = 'some value'

and in view

<textarea id="#abc" ng-bind="value"></textarea>

Upvotes: 1

Related Questions