Question

使用AngularJS的C＃MVC App

我正在尝试在表格中显示最初在文本区域中输入的值列表。

这是工作流程

用户在文本区域中输入值

A
B
C

当用户点击按钮时，会打开一个模态窗口，并在表格中显示A B C.

我正在尝试使用angular来做到这一点。我尝试过以下方法：

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

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

也试过

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

这是我的模态窗口：

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

以下是打开窗口的JavaScript：

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

因此模态窗口打开并显示表格，但表格中没有值。

如何使用Angular

将值从文本区域传递到模态窗口中的表格

Answer 1

将ng_model = "letters"更改为ng-model = "letters"。

字母应为array而不是string。您必须将输入拆分为字符串列表。

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

Answer 2

您需要使用ng-model，而不是ng_model。只要您的模态与文本区域位于同一个控制器中，您就应该能够通过它。此外，您在$scope.和arrangelist之间有一个空格。有关简单的工作示例，请参阅this fiddle。

如何使用AngularJS将值从文本区域传递到表

2 个答案: