CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
irom
irom

Reputation: 3596

textarea value in angularjs

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>

Upvotes: 0

Views: 22654

Answers (1)

michelem
michelem

Reputation: 14590

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>

Upvotes: 6

Related Questions