0
所以我發現自己有點阻礙從角度的下拉選項中獲取值,以便爲我的postgreSQL數據庫創建兩個特定用戶角色之一。角度下拉選項值數據庫中的用戶角色的登錄數據對象
我有很多的投入(幾個互斥下拉),用於創建用戶如: 1名 2.密碼 3.電子郵件 等..
所有很容易傳遞到用戶對象在我的角度控制器內使用ng-model來引用它們。我試圖用我的表單實現的是我的選擇下拉列表中的每個選項都將特定值記錄到我的用戶對象中的角色的關鍵字,因此我可以將它存儲到「角色」字段中的特定記錄。
HTML SNIPPIT:
<form name="createAccount" ng-submit="create(this)">
<select ng-model="showRole" class="form-control" ng-options="role.abbreviation as role.name for role in roles">
<option value="">Choose One</option>
</select>
<div ng-switch="showRole">
<div ng-switch-when="agt">
<div>
<label for="firstName">First Name</label>
<input type="text" ng-model="createAccount.firstName">
</div>
<div>
<label for="lastName">Last Name</label>
<input type="text" ng-model="createAccount.lastName">
</div>
<div>
<label for="email">E-mail</label>
<input type="e-mail" ng-model="createAccount.email">
</div>
<div>
<label for="company">Agency</label>
<input type="text" ng-model="createAccount.company">
</div>
<div>
<label for="createAccount-username">Username</label>
<input type="text" ng-model="createAccount.username">
</div>
<div>
<label for="createAccount-password">Password</label>
<input type="password" ng-model="createAccount.password">
</div>
<div>
<label for="createAccount-passwordConfirm">Password Confirm</label>
<input type="password" ng-model="createAccount.passwordConfirm">
</div>
</div>
<div ng-switch-when="pmt">
<div>
<label for="firstName">First Name</label>
<input type="text" ng-model="createAccount.firstName">
</div>
<div>
<label for="lastName">Last Name</label>
<input type="text" ng-model="createAccount.lastName">
</div>
<div>
<label for="email">E-mail</label>
<input type="e-mail" ng-model="createAccount.email">
</div>
<div>
<label for="company">Venue</label>
<input type="text" ng-model="createAccount.company">
</div>
<div>
<label for="createAccount-username">Username</label>
<input type="text" ng-model="createAccount.username">
</div>
<div>
<label for="createAccount-password">Password</label>
<input type="password" ng-model="createAccount.password">
</div>
<div>
<label for="createAccount-passwordConfirm">Password Confirm</label>
<input type="password" ng-model="createAccount.passwordConfirm">
</div>
</div>
<div>
<button>Create Account</button>
</div>
和角度控制器:
(function(){
var LoginController = function ($scope, $http) {
$scope.pageID = "Login/Register Page";
$scope.create = (form) => {
console.log('create form submitted');
const user = {
firstName: form.createAccount.firstName,
lastName: form.createAccount.lastName,
email: form.createAccount.email,
company: form.createAccount.company,
username: form.createAccount.username,
password: form.createAccount.password,
}
$http.post('/users/create', user)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
}
$scope.loginSubmitted = (form) => {
console.log('login form submitted');
}
$scope.roles = [{ abbreviation: 'agt', name: "Agent"},{abbreviation: 'pmt', name: "Promoter"}];
this.setTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
this.notSelected = function(checkTab) {
return !(this.isSelected(checkTab));
};
this.getTab = function() {
return this.tab;
};
this.setIsDefault = function() {
this.isDefault = true;
};
this.getIsDefault = function() {
return this.isDefault;
};
}
angular.module('avp')
.controller('LoginController', LoginController);
LoginController.$inject = ['$scope', '$http'];
}())