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展示了它。

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

1 个答案: