I am currently dealing with 2 entities: project and project_types. Each project can have one or multiple project_types associated with it.
Using ajax (ng-init), I am retrieving the project data (including its related project_types) and all available project_types for selection:
$scope.showProject = function() {
$http.post($scope.apiUrl+'/show', {
projectslug: $attrs.projectslug
}).success(function(data, status, headers, config) {
$scope.project = data;
});
$http.post($scope.apiProjectTypesUrl+'/index', {
}).success(function(data, status, headers, config) {
$scope.project_types = data;
});
};
The {{project}} scope contains the following JSON:
{"id":1,"slug":"test","active":1,"name":"Test","description":"dgdgdgdg","from":"2015-12-22 00:00:00","to":"2015-12-22 00:00:00","created_by":1,"updated_by":1,"created_at":"2015-12-22 12:08:47","updated_at":"2015-12-22 12:08:47","deleted_at":null,"from_date_time":"22.12.2015","to_date_time":"22.12.2015","formatted_description":"dgdgdgdg","users":[],"project_types":[{"id":4,"slug":"event","active":1,"name":"Event","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 09:49:43","updated_at":"2015-12-22 09:49:43","deleted_at":null,"pivot":{"project_id":1,"project_type_id":4,"created_at":"2015-12-22 13:13:12","updated_at":"2015-12-22 13:13:12"}}]}
And in the {{project_types}} scope, there is this JSON:
[{"id":4,"slug":"event","active":1,"name":"Event","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 09:49:43","updated_at":"2015-12-22 09:49:43","deleted_at":null},{"id":5,"slug":"sfsfsfsfsfsfsfsfsfsf","active":1,"name":"sfsfsfsfsfsfsfsfsfsf","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 09:50:23","updated_at":"2015-12-22 09:50:23","deleted_at":null},{"id":6,"slug":"eteett","active":1,"name":"eteett","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 10:07:55","updated_at":"2015-12-22 10:07:55","deleted_at":null},{"id":7,"slug":"sfssfsf","active":1,"name":"sfssfsf","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 12:36:37","updated_at":"2015-12-22 12:36:37","deleted_at":null}]
In my HTML code, I am creating a select field (multiple):
<select id="projectTypes"
class="form-control"
name="projectTypes[]"
ng-model="project.project_types"
ng-options="project_type.id as project_type.name for project_type in project_types"
multiple="multiple">
</select>
There are 4 options in the select field, which match the entries in the project_types JSON.
However, I am facing difficulty selecting the appropriate relations from the project in the select field. The ng-model="project.project_types" consists of the following JSON:
[{"id":4,"slug":"event","active":1,"name":"Event","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 09:49:43","updated_at":"2015-12-22 09:49:43","deleted_at":null,"pivot":{"project_id":1,"project_type_id":4,"created_at":"2015-12-22 13:13:12","updated_at":"2015-12-22 13:13:12"}}]
I have been struggling to make this work properly. No value is being default-selected in my select field.
Thank you for guiding me in the right direction!