textarea value in angularjs

Question

I know it is similar to this In controller below I don't know how to get textarea value. In jquery I would just do $("#textarea1").val(); but can't do it here. Also if I create new model i.e.note for textarea I can refer to it as $scope.note bit still don't know what how to make assign textarea to it.

var app = angular.module("angularApp", []).controller("myConfigGenCtrl", function($scope) {
    $scope.textarea1 ="";
    $scope.clear = function() {
        $scope.textarea1 = "";
    };
    $scope.save  = function(data, filename) {
        data = $scope.textarea1;
        var blob = new Blob([data], {type: "text/plain;charset=utf-8"});
        filename = "textarea.txt";
        console.log($scope.textarea1);
        saveAs(blob, filename);
    };
});

Here is html

<body ng-app="angularApp">
    <div ng-controller="myConfigGenCtrl">
        <form name="myform">
            <input type="text" ng-model="message1"/>
            <input type="text" ng-model="message2"/>
        </form>

        <p>
            <textarea id="textarea1" cols="80" rows="10">
                This is {{message1}} in 1st line
                This is {{message2}} in lastst line
            </textarea>
        </p>
        <p>
            <button ng-click="save()">Save</button>
            <button ng-click="clear()">Clear</button>
        </p>
    </div>
</body>

michelem · Answer 1 · 2015-08-11T14:52:45.983

6

Assign an ng-model to it:

<p><textarea id="textarea1" cols="80" rows="10" ng-model="myTextArea">
  This is {{message1}} in 1st line
  This is {{message2}} in lastst line
</textarea></p>

Then you can get it from the controller with $scope.myTextArea

You could use also $watch to get data from other scope values and put into textarea:

JSFiddle

angular.module('myApp', [])
    .controller('dummy', ['$scope', function ($scope) {

    $scope.$watch("message1", function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.myTextArea = "This is "+newVal+" in 1st line";
        }
    });

    $scope.save = function () {
        console.log($scope.myTextArea);
    };
}]);

UPDATE:

You can also use ng-change in your input text to change the myTextArea scope value:

JSFiddle

HTML:

<input type="text" ng-model="message1" ng-change="myTextArea = message1 + message2" />
<input type="text" ng-model="message2" ng-change="myTextArea = message1 + message2" />
<p>
    <textarea id="textarea1" cols="80" rows="10" ng-model="myTextArea" ></textarea>
</p>

edited Aug 11 '15 at 14:52

answered Aug 11 '15 at 13:51

michelem

14,430
5
50
66

I tried it before but it cleans my textarea I can't type {{message1}} and {{message1}} into it any more . Also console.log($scope.myTextArea); shows undefined – irom Aug 11 '15 at 14:05
1

Define ```$scope.myTextArea``` in your controller. Set the value from your controller: ```$scope.myTextArea = 'This is ' + $scope.message1 + ' in 1st line\nThis is ' + $scope. message2 + ' in lastst line';``` – biancamihai Aug 11 '15 at 14:12
I want to change it in the view, not controller. But if I do this then I get This is undefined in 1st lineThis is undefined in lastst line 111 222 after adding console.log($scope.myTextArea); console.log($scope.message1,$scope.message2) – irom Aug 11 '15 at 14:20
I would like to editing textarea in controller, I need to edit it in View – irom Aug 11 '15 at 14:47
There is something in here http://stackoverflow.com/questions/16284442/cannot-get-textarea-value-in-angularjs talking about $parent – irom Aug 11 '15 at 14:51
Appreciate but there is going to be a lot of text in that textarea and only few models. So myTextArea is not only message1+message2. I can do it in jquery and it works using data = $("#textarea1").val(); prefer not to use jquery. Let me test your code , but I think it removes text around message1 and messag2 – irom Aug 11 '15 at 15:01
Just use a function in `ng-change` to return always the same text/variables – michelem Aug 11 '15 at 15:02
I tried but it gives me 111222 as myTextArea if message1 is 111 and message2 is 222. But my actual text is : This is 111 in 1st line This is 222 in last line. ;( – irom Aug 11 '15 at 15:17
1

I wrote only a test, just change `message1 + message2` with what you want: `'This is 1: ' + message1 + ' This is 2: ' + message2` – michelem Aug 11 '15 at 15:19
well, but this has to be done in controller which I want to avoid..I think I will stay with $("#textarea1").val(); – irom Aug 11 '15 at 15:24

textarea value in angularjs

1 Answers1