使用离子框架生成动态表单输入的“添加更多”按钮？答案

【问题标题】："Add More" button for generating dynamic form inputs using ionic framework?使用离子框架生成动态表单输入的“添加更多”按钮？
【发布时间】：2015-07-23 15:09:57
【问题描述】：

如何使用 ionic 框架和 angularjs 实现添加更多表单输入类型的功能？

应该是这样的——

http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

只需定义一个带有输入的数组，然后循环显示：

$scope.inputs = [
    { value: null }
];

$scope.addInput = function () {
    $scope.inputs.push({ value: null });
}

$scope.removeInput = function (index) {
    $scope.inputs.splice(index, 1);
}

在你看来：

<div ng-repeat="input in inputs">
    <input type="text"
           ng-model="input.value" />
    <button ng-if="$index == inputs.length - 1" 
            ng-click="addInput()">+</button>
    <button ng-if="$index != inputs.length - 1"
            ng-click="removeInput($index)">-</button>
</div>

见this jsfiddle

【讨论】：

devqon - 感谢您的及时帮助。您是否介意为此提供 plunker 或 jsfiddle 帮助我？这对我有很大帮助。请看，我对它完全陌生，对 UI 级别一无所知
哦 - 我不能使用 bootstrap 和 jquery，因为我使用的是 Ionic 框架，这就是我被卡住的原因:( 你如何用 Ionic 做到这一点？
这是在不使用 bootstrap 和 jquery 的情况下制作的，纯角度，所以它也可以在 ionic 中工作。不需要引导和 jquery 链接
谢谢，您能否帮助我了解如何将在这些动态字段中输入的值输入到 controller.js。我试过但失败了:(。我试图通过单击+输入尽可能多的输入，当单击一个按钮说搜索时，它会将在这些输入字段中输入的所有值都输入到数组中的控制器中。你能帮忙吗!!! 我将非常感谢。