data binding to text area and ng-show issue

Question

I seem to be having an issue with data binding to a text area. It seems very strange because the same method works fine for other input types, but doesnt want to work for text areas. I couldn't find any documentation saying there was anything specifically different in angular with text areas.

I am doing this-

<textarea rows="4" ng-model="assessments.prereqs" ng-show="editorEnabled"></textarea>
    <p ng-show="!editorEnabled">{{assessments.prereqs}}</p>

The issue I am having is when I toggle editorEnabled to off, the text area hides and nothing is shown in the <p> .

If i do something like this, the text shows, but will disappear when i trigger the ng-show to off with the editorEnabled. -

<textarea rows="4" ng-model="assessments.prereqs" ng-show="editorEnabled"></textarea>
    {{assessments.prereqs}}

It seems very odd because this method works fine with other various inputs, but not textarea. Any insight into this?

Thanks!

Answer 1

Here is a working plunkr: http://plnkr.co/edit/le38sGWTmQbFWB6ndRcM

There is nothing special about textarea except that they can be multilines and theredore include \\n which need to be replaced by <br> to be displayed correctly in HTML. The example I provide does not integrate this, but you can find a directive achieving this in another SO question: AngularJS: Writing to and Reading from textarea with multilines

Back to your question:

The controller:

.controller('myCtrl', function ($scope) {
    $scope.editorEnabled = true;
    $scope.assessments = {
        prereqs: 'It works !'
    };
});

And the HTML:

<div ng-controller="myCtrl">
    <div ng-click="editorEnabled = !editorEnabled">Toggle</div>

    <textarea rows="4" ng-model="assessments.prereqs" ng-show="editorEnabled"></textarea>
    <p ng-show="!editorEnabled">{{assessments.prereqs}}</p>
</div>