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 · Accepted Answer · 2015-08-11 14:52:45Z

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, 2015 at 14:52

answered Aug 11, 2015 at 13:51

michelem

14.6k5 gold badges55 silver badges67 bronze badges

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

10 Comments

irom Over a year ago

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

biancamihai Over a year ago

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';

irom Over a year ago

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 Over a year ago

I would like to editing textarea in controller, I need to edit it in View

michelem Over a year ago

I wrote only a test, just change message1 + message2 with what you want: 'This is 1: ' + message1 + ' This is 2: ' + message2

|

Collectives™ on Stack Overflow

textarea value in angularjs

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related