使用Angular设置html表单类型

问题描述：

我正在尝试使用Angular来显示包含对象的所有属性的表单。其中一些对象是密码，我希望使用这些密码表单类型。使用Angular设置html表单类型

到目前为止，我已经得到了它的类型属性设置为一个角方法的工作，但我不知道是否有它一个更清洁的角度语法（就像你如何使用NG-的href，而不是HREF）

的HTML代码示例：

<form name="siteSettingsForm" novalidate class="form-horizontal" ng-submit="save()"> 
     <div class="form-group" ng-repeat="property in siteProperties"> 
      <label for="{{ property }}" class="control-label col-sm-3">{{ property }}</label> 
      <input id="{{ property }}" type="{{ getPropertyFormType(property) }}" ng-model="site[property]" class="form-control col-sm-9" /> 
     </div> 

     <div> 
      <input type="submit" class="btn btn-primary" value="Save"/> 
     </div> 
    </form>

控制器代码：

app.controller("settingsController", [ 
    '$scope', 
    function ($scope) { 

     $scope.site = { 
      basic_auth_username: "myUsername", 
      basic_auth_password: "hide me" 
     }; 

     $scope.siteProperties = []; 
     for (var property in $scope.site) { 
      if ($scope.site.hasOwnProperty(property)) { 
       $scope.siteProperties.push(property); 
      } 
     } 

     $scope.getPropertyFormType = function(property) { 
      if (property.indexOf("password") > -1) { 
       return "password"; 
      } else { 
       return "text"; 
      } 
     } 
}]);

所以问题：是否有使用角来指定形式类型更好的办法？

答

对于后人：我结束了使用我在我的问题描述的方法

答

查看ng-attr部分here。你可以使用它来装饰类型属性。虽然无论如何您都不允许动态切换输入类型，但我并没有看到使用它的明显优势。你这样做的方式（当DOM被加载时硬编码）可以很好地满足你的需求。

根据对象的形状，您可能能够清理您的函数，并将其直接放入您的HTML中的Angular表达式中。

使用Angular设置html表单类型

相关推荐