Question

我有一个不同选项（数字）的下拉列表。如果选择了某个数字，则应显示一定数量的文本字段，具体取决于之前选择的数字。

示例：

用户选择数字= 2 应该有两次称为“名称”的文本域

                <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
                    <option value="0">---Please select---</option>
                    <option value="1">1</option> 
                    <option value="2">2</option>
                </select><br>





     <div ng-repeat="t in vm.getTimes({{data.singleSelect}}) track by $index">
     {{$index}} 
    <input ng-model="text1" /> <!-- this textfield should be repeated--></div>

控制器中的函数getTimes：

vm.getTimes = function (n) {
        return new Array(n);
    };

我无法通过vm.getTimes选定的选项 - 为什么不呢？

如果我在函数{{data.singleSelect}}中为getTimes编写了一个INT，那就可以了。

Answer 1

您拥有固定数量的选项，因此您可以使用limitTo

＆＃13;

var app = angular.module("app", [])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
    <option value="0">---Please select---</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <br>

  <div ng-repeat="t in [1,2] | limitTo:data.singleSelect track by $index">
    {{$index}}
    <input ng-model="text1" />
    <!-- this textfield should be repeated-->
  </div>
</div>

＆＃13;

Answer 2

您的getTimes功能应该是这样的。

getTimes = function (n) {
            if(n){
                  return new Array(parseInt(n));  
            }else{
                  return 0;
            } 
        }

为什么它不起作用？

您传递的参数创建使用的初始化长度数组具有相同的价值。

因为n是字符串。您需要将其解析为Integer。

检查JavaScript#Array。

这是工作plunker

Answer 3

您正在尝试根据输入创建一个新数组（您假设它是一个数字），但您永远不会确保它确实是一个。

例如：

t in getNumber(data.singleSelect * 1) track by $index会解决它，或

$scope.getNumber = function (num) {
  return new Array(parseInt(num));
}

也可以使你的循环功能正常。

您正在尝试做什么：

> new Array("2")
< ["2"]

你应该做什么：

> new Array(2)
< [undefined × 2] 
//don't worry about undefined for now, but this array has 0 and 1 elements.

以下是您的示例的更新小提琴：https://plnkr.co/edit/rPhFnmmKNvHtSirGCYHG?p=preview

AngularJS：根据选择选项显示文本字段

3 个答案: