javascript - 如何使用 angularjs 创建点击按钮时的动态输入字段?

标签 javascript angularjs dynamic input-type-file

我有一个像这样的下拉菜单

enter image description here

[简答 - 文本框、复选框、单选按钮和下拉菜单] 用户可以选择输入类型,并且可以通过单击添加选项按钮来添加选项,如下所示 enter image description here

通过单击十字图标,需要删除选项。

我推荐了dynamic text area

http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/

但是我需要更多关于此的引用,请向我建议一个使用 Angular js 实现此目的的想法。

最佳答案

从每个定义一个输入的对象数组构建输入列表。单击按钮,将一个新对象添加到定义要添加的输入的数组中。

html:

<div ng-repeat="input in inputsList">
  <span ng-click="remove($index)>x</span><input ng-if="input.type==='text'" type="text" />
  <span ng-click="remove($index)>x</span><input ng-if="input.type==='checkbox'" type="checkbox" />
  ...
</div>
<button ng-click="addNewCheckBox()">Add</button>

Controller :

$scope.addNewCheckBox = function() {
  $scope.inputsList.push({ type: 'checkbox' });
};

$scope.remove = function(index) {
   $scope.inputsList.splice(index, 1);
};

如果您有一个带有配置对象的自定义输入指令,并且它将决定要构建哪个输入,那可能是最好的。但为了简单明了,我只使用了基本的原始 html 输入。

请告诉我这是否有意义或者您需要 Angular2/4 答案。

关于javascript - 如何使用 angularjs 创建点击按钮时的动态输入字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43862796/

相关文章:

javascript - 不要滚动元素调整大小

javascript - JS 正则表达式从文本区域中删除 "too much"

javascript - 创建元素不起作用

Javascript 不止一个 RegEx 反向引用

javascript - Angular UI Router - 具有空 Url 的抽象父状态

mysql - 动态自引用多对多关系

php - 通过表单更新 JSON?

javascript - 根据对象字段值查找javascript "array of objects"的索引

使用 Linq 表达式的 C# 动态数据库过滤

javascript - 在没有服务器端编码的情况下将动态 URL 字段传递到 iframe