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

Question

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>");
});

DOM manipulation should be done within a directive, no need for jquery. I can add snippet if you'd like. LMO — alphapilgrim, Jan 05 '17 at 20:46

score 1 · Answer 1 · answered Jan 05 '17 at 20:01

1

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>

answered Jan 05 '17 at 20:01

Farooq Ahmed Khan

3,975
3
27
36

Does not work for me. i get this error"Error: [jqLite:nosel] http://errors.angularjs.org/1.5.5/jqLite/nosel.And another thing what if i want to change the value of some to "red" and value to "blue.How can i achieve that.Can you elaborate more on the code . I am very new to angular – user3370006 Jan 05 '17 at 20:05
looks like there is any external dependency missing in your angular app. angular.module('app_name', [pass_dependencies_here]); – Farooq Ahmed Khan Jan 05 '17 at 20:21
if you want to update multiple controls then i suggest you to look at angular directives. – Farooq Ahmed Khan Jan 05 '17 at 20:22

score 0 · Answer 2 · answered Jan 05 '17 at 21:04

0

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

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

answered Jan 05 '17 at 21:04

Leonid Z

141
7

score 0 · Answer 3 · edited May 23 '17 at 12:24

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.

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

3 Answers3