AngularJS：将动态创建的控件绑定到模型

Question

我需要根据用户的输入动态创建一个 GUI。一个用例是，用户在生成的报告中输入他/她想要的标题数量。因此，我通过 ng-repeat 渲染输入控件，效果很好。在那些呈现的输入标签中，必须可以输入报告的标题。

唯一的问题是我不知道如何将文本框的输入绑定到模型，因为输入控件的数量每次都不一样。

观点：

<div ng-app>
    <div ng-controller="Controller">
        <input type="number" ng-model="numberOfCtrls"/>
        <div ng-repeat="i in getTimes(numberOfCtrls) track by $index">
            <input type="text" style="width:100px;" />
        </div>
    </div>
</div>

控制器：

function Controller($scope){
 $scope.numberOfCtrls = 0;   
 $scope.tempNumber = 0;

 $scope.getTimes = function(number){

   return new Array(number);   
 };
}

见http://jsfiddle.net/5dzvnbtt/

提前致谢

Answer 1

您可以使用所需数量的标题对象填充变量。

这是一个例子：

$scope.headlines = [];

$scope.$watch('numberOfHeadlines', function() {
    $scope.headlines = [];
    if ($scope.numberOfHeadlines !== undefined) {
        for (i = 0; i < $scope.numberOfHeadlines; i++) {
            $scope.headlines.push({ title: '' });
        };          
    }

});

还有模板：

<select ng-model="numberOfHeadlines">
    <option value="">Choose headlines</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<div ng-repeat="headline in headlines">
    Headline {{ $index + 1 }} is: {{ headline.title }}
    <br />
    <input type="text" ng-model="headline.title">
    <hr />
</div>

还有一个JSFiddle 演示它。