angularJS填充用Json数据选择并选择所选值

angularJS fill Select with Json data and select the selected value

本文关键字:选择 数据 填充 Json angularJS      更新时间:2023-09-26

我有两个实体。project和project_types。一个项目有一个或多个项目类型。

通过ajax(ng-init),我获得了项目数据(以及该项目的相关项目类型)以及所有项目类型(用于为项目选择一个或多个项目类型):

$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;
        });
    };

因此,在{{project}}范围中有这样一个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"}}]}

在{{project_types}}范围中有这样一个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}]

在我的html中,我创建了选择(多个)字段:

<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>

因此,在我的选择字段中有4个选项(如project_types json-这是正确的)

但是,如何在选择字段中从项目中选择正确的关系?ng model="project.project_types"包含以下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"}}]

我不能让这个工作。。。在我的选择字段中不会默认选择任何值。。。

谢谢你把我推向正确的方向!

您是否尝试添加"track by"?

 ng-options="project_type.id as project_type.name for project_type in project_types track by project_type.id"

如果你有一个工作的代码片段或小提琴,会更容易提供帮助。