How to set select options using firebase database and ng-repeat - angularjs

Question

Database (.JSON):
{
"permissionLevels" : {
"Admin" : {
"Comment Access" : "value",
"Page Access" : "value",
"Post Access" : "value"
},
"Default" : {
"Comment Access" : "value",
"Page Access" : "value",
"Post Access" : "value"
},
"Template" : {
"Comment Access" : "value",
"Page Access" : "value",
"Post Access" : "value"
}
},
"users" : {
"User 1" : {
"Email" : "user1#gmail.com",
"Name" : "User 1",
"PhotoURL" : "https://lh5.googleusercontent.com/-m1_AWD2hhp0/AAAAAAAAAAI/AAAAAAAAAZY/IhIwoLVwl6U/s96-c/photo.jpg",
"Role" : "Default",
"uid" : "1235"
},
"User 2" : {
"Email" : "user2#gmail.com",
"Name" : "User 2",
"Role" : "Default",
"uid" : "1236"
},
"User 3" : {
"Email" : "user3#gmail.com",
"Name" : "User 3",
"PhotoURL" : "https://lh5.googleusercontent.com/-m1_AWD2hhp0/AAAAAAAAAAI/AAAAAAAAAZY/IhIwoLVwl6U/s96-c/photo.jpg",
"Role" : "Admin",
"uid" : "1237"
}
}
}
HTML:
<table id="table">
<tr>
<th>Name</th>
<th>Email</th>
<th>Permission Level</th>
</tr>
<tr ng-repeat="(key, value) in users">
<td>{{value.Name}}</td>
<td>{{value.Email}}</td>
<td>
<select name="{{key}}">
<option ng-model="key">{{value.Role}}</option>
<option ng-repeat="(permissionLevel, permissions) in permissionLevels.permissionLevels" ng-if="permissionLevel!=value.Role && permissionLevel!='Template'" ng-selected="string">{{permissionLevel}}</option>
</select>
</td>
</tr>
</table><br/>
What I want to do is display a table with each user's name, email and role (permission level). The role for each person should be displayed in a <select></select> tag and the user should be able to change it and click "UPDATE ALL" to save changes. I got the table to display everything properly but, the issue is getting information out of the table and onto the database. This is what I have so far on the table
In case you are wondering, I want it to ignore the "Template" role because it is there to use as a template for later on.

Answer 1

$firebaseArray and $firebaseObject have 3-way data binding. The view, controller, and database.
var ref = firebase.database().ref("users");
// var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/users");
$scope.users = $firebaseArray(ref);
When you click "Update" you need to iterate through and $save all the records that changed roles.
First I would change your select to:
<select name="{{key}}" ng-options="p.value as p.label for p in permissionLevels" ng-model="value.Role">
</select>
Assuming you have an array of roles:
$scope.permissionLevels = [
{
value: "Default",
label: "Default",
},
{
value: "Admin",
label: "Admin",
}
];
Then when clicking "Update" you can call some function:
$scope.update = function() {
for(var i=0; i<$scope.users.length; i++) {
// Saves all
$scope.users.$save(i).then(function(ref) {
// whatever
})
}
}
Reference: $firebaseArray $save