<form> angularJs 中的动态添加属性答案

【问题标题】：Dynamic Add attribute in <form> angularJs<form> angularJs 中的动态添加属性
【发布时间】：2012-09-03 08:57:58
【问题描述】：

我正在尝试在使用 angularJs 指令时添加动态添加属性我想在表单中动态添加html标签

我的看法：

<div ng-show="edit_tasks">   
   <edittask-form><edittask-form> 
</div>

我的表单 HTML

{
<div>
  <form ng-submit="submitFrom()" csrf-tokenized>
    Task Name<input type="text" placeholder="Name" ng-model="newtask.name" required />
    Task Description<input type="text" placeholder="Description" ng-model="newtask.description" required />
    Start Date <input type="text" placeholder="Start date" ng-model="newtask.start_date" required />
    Start Date <input type="text" placeholder="End date" ng-model="newtask.end_date" required />
    <input type="submit" value="submit" />
  </form>
</div>
}

我的指令

module.directive("edittaskForm", function() {
  return {
    restrict: "E",
    templateUrl: "<%=asset_path 'tasks/task_form.html' %>",
    controller: tasksCtrl,
    replace: false,
    link: function(scope, elt, attrs, controller) {
          scope.form = elt.find("form");
          console.log(scope.form);

          scope.taskEdit = function(task) {
            scope.task =  task;
            scope.show_tasks = false;
            scope.edit_tasks = true;
            scope.newtask = task;
          };
        }
  }
});

如何添加<input type="text" name="xyz" /> 形式上

提前考虑

【问题讨论】：

不清楚你的意思是这个。你想把这个输入放在哪里？为什么不能直接放在html中？您是指无法动态设置输入上的名称属性的事实吗？

标签： javascript html ruby-on-rails-3 angularjs

【解决方案1】：

您可以通过使用 ngShow 在模板中执行此操作，但如果您想在指令中执行此操作，我想您无法在链接函数中执行此操作，因为我知道它不支持 html 转换，我想您应该尝试在 compile 函数中执行此操作，您可以阅读更多相关信息here。

【讨论】：

【解决方案2】：

如果你想在angularjs中为表单元素添加动态属性，你可以做以下事情。

第 1 步： 创建读取表单元素的自定义指令，如下所示：

注意：这里我使用 querySelectorAll('selector') 来获取所有输入元素，如果您想获取单个元素，可以使用 querySelector('selector')。

app.directive('dynamicAttribute', function ($compile) {
    return {
             link: function (scope, element, attrs, ctrl) {
                  var allElements=element[0].querySelectorAll('input');
                  for(var i=0;i<allElemts.length;i++){
                      allElements[i].setAttribute('ng-keypress','resetValues($event)');
                 }
                     $compile(allElements)(scope);
              }
         };
       });

第 2 步：将此指令添加到您的元素中

 <form name="userForm" dynamic-attrubute>
    <input type="text"   name='name' ng-model-options="{ updateOn: 'blur' }" ng-model="name">
    <input type="text"  name='password' ng-model-options="{ updateOn: 'blur' }" ng-model="password">
</form>

动态按键属性加上值函数

【讨论】：