使用 ng-repeat 创建动态表单
creating dynamic forms using ng-repeat
大家好,我需要创建一些动态表单,以便用户可以根据自己的规范配置提要。
我使用 ng-repeat 做了以下事情:
- 为用户需要配置的每个提要创建一个新选项卡
每个 属性 提要都有一个标签并创建输入文本框。
标记:
<tabset>
<tab ng-repeat="feed in feeds" heading="{{feed.heading}}">
<form role="form">
<div class="row" ng-repeat="property in feed.properties">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<span>{{property.name}}</span>
</span>
<input type="text" class="form-control" value="{{property.value}}">
</div>
</div>
</div>
</form>
</tab></tabset>
这在我拥有的 json 支持下工作得很好但是我想知道为这种用例捕获数据的公认方式是什么,显然我不知道有多少提要或属性每个提要都有,所以我想我需要以某种方式将其绑定到一个数组。
问题是如何?
使用ng-model
<input type="text" class="form-control" ng-model="property.value">
这样文本框就会绑定到 property.value
。当您更改文本框中的文本时,angular 会自动更新 property.value
。您可以像使用任何其他变量一样在 JS 中使用它。这就是angular的魅力。
大家好,我需要创建一些动态表单,以便用户可以根据自己的规范配置提要。
我使用 ng-repeat 做了以下事情:
- 为用户需要配置的每个提要创建一个新选项卡
每个 属性 提要都有一个标签并创建输入文本框。 标记:
<tabset> <tab ng-repeat="feed in feeds" heading="{{feed.heading}}"> <form role="form"> <div class="row" ng-repeat="property in feed.properties"> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon"> <span>{{property.name}}</span> </span> <input type="text" class="form-control" value="{{property.value}}"> </div> </div> </div> </form> </tab></tabset>
这在我拥有的 json 支持下工作得很好但是我想知道为这种用例捕获数据的公认方式是什么,显然我不知道有多少提要或属性每个提要都有,所以我想我需要以某种方式将其绑定到一个数组。
问题是如何?
使用ng-model
<input type="text" class="form-control" ng-model="property.value">
这样文本框就会绑定到 property.value
。当您更改文本框中的文本时,angular 会自动更新 property.value
。您可以像使用任何其他变量一样在 JS 中使用它。这就是angular的魅力。