"添加更多"使用离子框架生成动态表单输入的按钮?

时间:2015-07-23 06:41:56

标签: angularjs ionic-framework

如何使用ionic framework和angularjs实现Add More表单输入类型的功能?

应该是这样的 -

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

1 个答案:

答案 0 :(得分:7)

只需使用输入定义一个数组,然后循环显示它们:

$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