I've been experimenting with Angular in order to create a form that includes all the properties of an object. Among these properties are passwords, and I want Angular to utilize the password form type for them.
Currently, I have managed to make it work by assigning the type attribute to an angular method. However, I am curious if there is a more streamlined syntax in Angular for achieving this (similar to how ng-href simplifies href usage).
Below is a snippet of the HTML code:
<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>
The controller code looks like this:
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";
}
}
}]);
My question is: do you know of a more efficient way to use Angular to specify the type in the form?