Bootstrap 在复杂对象列表上提前输入

Question

我有动态显示输入字段的表单，这意味着为特定客户显示不同的输入字段。序列和显示的输入字段由数据库驱动。对于每个输入文件，我都想提前打字。完整的表格用下面的对象表示：

{
    attributes:Array[9]
    s_Id:1376
    name:"test_name"
    c_Id:512
    active:true
    created:"2016-11-28T09:47:35.000+0000"
    updated:"2016-12-05T14:52:17.649+0000"
    valid:Moment
}

关于输入文件的所有信息都存储在数组属性中，它是如下所示的对象列表。在这个对象中有一个数组 attvalue，它显示了为这个特定字段插入的所有以前的值，这实际上是特定输入字段的预输入。

{
    attributeId:138
    attributevalueId:618
    c_Id:512
    s_Id:1376
    attvalue:Array[4]
       0:"Typeahead value 1"
       1:"Typeahead value 2"
       2:"Typeahead value 3"
       3:"Typeahead value 4"
    language:"en"
    updatedAt:"2016-12-05T14:52:17.649+0000"
    created:"2016-11-28T09:47:35.000+0000"
}

在视图中，我遍历属性数组以显示表单。为了显示提前输入，我输入了 HTML 元素：

typeahead="attvalue as object.attvalue for object in object attributes| limitTo:100" ng-maxlength="45" autocomplete="off"

这没有显示适当的值，对于特定的 typeahead 应该这样显示（以 JS 方式编写）：

object.attributes:Array[10].attvalue=["Typeahead value 1", "Typeahead value 2", "Typeahead value 3", "Typeahead value 4"]

如何解决这个问题？更好的解决方案是在视图中解决它，然后更改完整的控制器。

Answer 1

我找到了解决这个问题的方法。首先，可以制作非常复杂的列表和对象等，并且仍然使用 bootstrap typeahead，因为我已经看到了很多简单的例子。首先，我添加了数组 attvalues 来列出 attributevalueList 并且属性 attvalue 仅用于 ng-model 指令的最终值。列表中的新对象如下所示：

 object.attributes:Array[1].attvalues:

{
   attributeId:138
   attributevalueId:618
   c_Id:512
   s_Id:1376
   attvalue:""
   attvalues:Array[4]
      0:"Typeahead value 1"
      1:"Typeahead value 2"
      2:"Typeahead value 3"
      3:"Typeahead value 4"
   language:"en"
   updatedAt:"2016-12-05T14:52:17.649+0000"
   created:"2016-11-28T09:47:35.000+0000"
}

我已将视图中的打字更正如下：

 typeahead="attvalues for attvalues in object.attributevalueList[$index].attvalues | limitTo:100" ng-maxlength="45" autocomplete="off">

Bootstrap 在复杂对象列表上提前输入

Bootstrap Typeahead on list of complex object

angularjs

bootstrap-typeahead