Question

我有一个选项列表中的输入字段列表。现在，我使用ng-repeat将这些输入字段添加到我的页面。

<input type="text">

我将他们的输入类型放在重复的相同选项对象中。这些类型是这样的：String，Varchar等。

现在，我想根据我拥有的参数类型设置输入字段的类型。

这是我想做的事情

<tr ng-repeat = "option in options">
<td><input type="text" ></td>
</tr>

我有一个名为option.Paramtype的参数，它包含每个输入字段的类型。我想将输入字段的类型设置为数字，如果它是Int，依此类推。

请帮忙。

Answer 1

鉴于您有一系列选项，例如：

options = [
  {Paramtype:'String', foo:25, bar:'Unicorn'},
  {Paramtype:'int', foo:30, bar:'Kitten'},
  {Paramtype:'Email', foo:28, bar:'Dragon'},
  {Paramtype:'Date', foo:15, bar:'Kanye'}
]

在ng-repeat块中，您可以使用ng-if检查Paramtype属性并相应地设置输入类型。像这样：

<tr ng-repeat = "option in options">
    <td>
        <input ng-if="option.Paramtype == 'String'" type="text">
        <input ng-if="option.Paramtype == 'int'" type="number">
        <input ng-if="option.Paramtype == 'Email'" type="email">
    </td>
</tr>

希望有帮助

否则，如果您可以在选项数组中的每个元素中添加一个附加参数，则可以使用角度绑定填充输入类型。

options = [
  {Paramtype:'String', inputType:'text', bar:'Unicorn'},
  {Paramtype:'int', inputType:'number', bar:'Kitten'},
  {Paramtype:'Email', inputType:'email', bar:'Dragon'},
  {Paramtype:'Date', inputType:'datetime', bar:'Kanye'}
]

<table>
    <tr ng-repeat = "option in options">
      <td><input type="{{option.inputType}}"></td>
    </tr>
</table>

Answer 2

我建议您使用ng-attr指令动态设置type属性的值，为了使您的实现更清晰，您应该维护一个将具有映射的对象什么Paramtype将是什么输入类型。然后我们可以使用mappingOfTypes变量及其索引来填充输入字段的type属性值。

<强>标记

<tr ng-repeat = "option in options">
    <td><input ng-attr-type="{{mappingOfTypes[option.Paramtype]}}" ></td>
</tr>

<强>控制器

$scope.mappingOfTypes = ["String": "text", "Int": 'number'];

在ng-repeat中设置输入类型

2 个答案: