How to pass values from text area to table using AngularJS

Question

C# MVC App using AngularJS

I am trying to display a list of values in a table that were originally entered in a text area.

Here is the workflow

User enters values in a text area as

A
B
C

When the user clicks on a button a modal window opens and should display A B C in a table .

I am trying to use angular to do this. I have tried the following:

<a class="btn btn-inverse pull-right" ng-click="arrangelist()">Arrange list</a>

<textarea id="letterlist" ng_model="letters"></textarea>

Also tried

@Html.TextAreaFor(model => model.letters, new { ng_model = "letters", @class = "width-100-percent", @rows = "7" })

And here is my modal window:

<div id=" arrangelist" class="modal hide fade" aria-hidden="true">
    <table class="table">
        <thead>
            <tr>
                <th>Letters</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-animate="'table-anim'" ng-repeat="letter in letters">
                <td>{{letter}}</td>
           </tr>
        </tbody>
    </table>
    <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>

Here is the JavaScript that opens the window:

$scope. arrangelist = function() {
    return $('#arrangevideos').modal('show');
}

So the modal window opens and displays the table but no values are inside the table.

How can I pass the values from the text area to the table in the modal window using Angular

zs2020 · Accepted Answer · 2013-08-13 17:59:20Z

1

Change ng_model = "letters" to ng-model = "letters".

And letters should be an array instead of string. You have to split the input to list of strings.

$scope.arrangelist  = function() {
    var letterplits;
    letterplits = $('#letterlist').val().split('\n');
    $scope.letters = letterplits;
    return $('#arrangelist').modal('show');
}

edited Aug 13, 2013 at 17:59

answered Aug 13, 2013 at 17:30

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

3 Comments

Milligran Over a year ago

Thats an oversight by me. I changed it but the values from the text area still doesnt populate the table in the modal window

zs2020 Over a year ago

@Milligran The problem could be letters needs to be an array, you have to split the string typed in

Milligran Over a year ago

Thanks. Thats it. converted to array

var-foo · Accepted Answer · 2013-08-13 17:51:17Z

0

you need to use ng-model, not ng_model. As long as your modal is in the same controller as your textarea, you should be able to pass it. Also, you have a space between $scope. and arrangelist. See this fiddle for a simple working example.

answered Aug 13, 2013 at 17:51

var-foo

1066 bronze badges

Collectives™ on Stack Overflow

How to pass values from text area to table using AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related