angularJS填充用Json数据选择并选择所选值
angularJS fill Select with Json data and select the selected value
我有两个实体。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"
如果你有一个工作的代码片段或小提琴,会更容易提供帮助。
相关文章:
- Angularjs选择以选择数据传递
- 选择数据属性日期值早于当前服务器日期的元素
- 根据匹配的零件选择数据属性
- 在iMacros javascript中选择数据源文件
- 如何选择数据
- 取消选择数据表中的所有选定行
- 使用 jquery 从下拉列表中选择数据
- 如何使用 d3 选择数据中的类别
- 如何从数组中拆分和获取选择数据
- 句柄无法从json中选择数据
- 基于多个属性d3来选择数据
- 根据以前的选择数据从JSON数据加载选择选项
- 如何在JQuery中从数组中选择数据
- 如何使用jQuery选择数据标题中的元素
- 使用jQuery选择数据属性为*而非*的元素
- 无法通过Node.js中的Sequelize从数据库中选择数据
- 如何选择数据表中的所有复选框
- 选择数据属性等于任何东西的元素
- 如何使用Angular.js获得多选择数据,并在列表的每一项中添加复选框
- 特别是当我们必须在两个日期之间选择数据时,以下哪个JSON更好