Angular JS: Not able to return the modified text area to JavaScript

Question

HTML:

<div class="col-md-12 col-lg-12">
    <div class="panel with-nav-tabs panel-default">
        <div class="panel-heading">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1default" data-toggle="tab">Apex Editor</a></li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="btn-group-vertical">
                <button type="button" class="btn btn-primary" id="editBtn">Edit</button>
                </button>
            </div>
            <div class="tab-content" align="left">

                <div>{{apexClassWrapper.name}}</div>
                <pre class="prettyprint">
                    <code class="language-java">
                        <textarea ng-change>{{apexClassWrapper.body}}</textarea>
                    </code>
                </pre>
            </div>
            <button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
        </div>
    </div>
</div>

JavaScript :

function OrderFormController($scope, $http) {

    $http.get("http://localhost:8989/getApexBody").then(function (response) {
        $scope.apexClassWrapper = response.data;
    });


    $scope.postdata = function (apexClassWrapper) {
        console.log(apexClassWrapper);

        var dataObj = {
            name: apexClassWrapper.name,
            body: apexClassWrapper.body,
            id: apexClassWrapper.id
        };

        $http.post("http://localhost:8989/modifyApexBody", dataObj)
            .success(function (data) {
                $scope.message = data;
            })
            .error(function (data) {
                alert("failure message: " + JSON.stringify({data: data}));
            });

    };

};

When I click the Save Button, I am not able to get the modified data from the <textArea> tag, it provides me the scope data. How can I pass the modified data from TextArea from Html to my JavaScript file when I click Save button?

2nd Question: I am using "prettyprint" but it still does not work, I have included these files also:

<script src="../js/prettify.js"></script>
<script src="../js/run_prettify.js"></script>
<script src="../js/lang-basic.js"></script>
<link href="../css/prettify.css" rel="stylesheet"/>

The text area still shows normal black text.

Marcus Höglund · Accepted Answer · 2018-01-20 20:55:59Z

1

Set the NgModel on the tag

<textarea ng-model="apexClassWrapper.body"></textarea>

answered Jan 20, 2018 at 20:55

Marcus Höglund

16.9k11 gold badges54 silver badges72 bronze badges

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

2 Comments

Nagendra555 Over a year ago

Yes this worked. Is there any way I can get the 2nd part work too. Or can we not prettify text area ?

Marcus Höglund Over a year ago

@Nagendra555 I think you should post a new seperate question with the prettyprint issue

Collectives™ on Stack Overflow

Angular JS: Not able to return the modified text area to JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related