AngularJS动态地向ng-repeat模板添加元素

Question

我有一个名为'variables'的数组，我把它变成了一个表。

<tr ng-repeat="variable in variables">
  <td>
    <textarea ng-model="variable.extras" ...>{{variable.extras}}</textarea>
  </td>

然后我有一个函数numberOfRowsForChoiceVariable，它查看variable.extras并确定它有多少行，做一些事情，比如删除空行等......所以现在在下一个＆lt; td＆gt; element我希望拥有尽可能多的＆lt; select＆gt;调用numberOfRowsForChoiceVariable（变量）返回的元素。

因此，如果他们将4行放入variable.extras，那么我想在下一个＆lt; td＆gt;

中显示4个选择元素

我想我需要使用某种类型的$ watch（）来启用它，但我不确定如何在ng-repeat范围内使用它。

Answer 1

使用案例

如果我误解了你的问题，请告诉我。这是我从你的问题中理解的内容。

1. 用户在textarea中输入文字
2. 系统计算行数
3. 行数将创建该选择元素的数量。 [编辑：符合此要求的更新解决方案]

解决方案

您可以使用过滤器从行计数中创建列表。

控制器

根据您的要求，此控制器使用正则表达式来计算行数。我还没有在Unix系统上对此进行测试，但它在Windows上运行良好。 lines函数将返回给定字符串输入的行数。

function ctrl($scope) {
    $scope.variables = [{extras: ""}, {extras: ""}, {extras: ""}];

    $scope.lines = function (input) {
        if (angular.isString(input)) {
            return input.split(/\r?\n/).length;
        }
        return 0;
    };
}

过滤

需要过滤器来创建给定长度的临时数组。这是函数式编程的一个常见组件。

var app = angular.module('app', []);
app.filter('range', function () {
    return function (input, total) {
        total = parseInt(total);
        input = Array.apply(null, Array(total))
             .map(function(value, index) {
                 return index;
             });
        return input;
    };
});

视图

使用此视图，可以在textarea旁边动态创建<select>。我已经缩短了变量名称，因此它可以放在这个屏幕上，但不要这样做，这是不好的形式。

<div ng-app='app' ng-controller="ctrl">
    <table>
        <tr ng-repeat="v in variables">
            <td>
                <textarea ng-model="v.extras">
                    {{v.extras}}
                </textarea>
            </td>
            <td>
                 <select ng-repeat="n in [] | range:lines(v.extras)">
                 </select>
            </td>
        </tr>
    </table>
</div>

演示

您可以通过此jsFiddle访问演示。