我从api请求获取表单,其中一些字段基于ng-options。选项数据来自角度服务。所以在页面上它看起来像: 表格打开后:
现在一切都很好,表格已经打开并呈现。现在,如果我想修改某些内容,可以毫无问题地修改简单的输入字段,并且可以在db中进行更改,但如果我想修改选项字段,我会收到此错误:
优先级:
无法创建属性' priorityId'在字符串'优先'
严重性:
无法创建属性&{39; severityId'在字符串' severity'
状态:
无法创建属性' statusId'在字符串'状态'
我的错误在哪里?这是plunker
我的服务
(function () {
angular.module("app").factory("eventService", ["$http", "$q", "$log",
function ($http, $q, $log) {
var severityOptionsFunc = [
{
name: "Benign",
id: 4,
labelStyle: "label-danger"
},
{
name: "Severe",
id: 3,
labelStyle: "label-warning"
},
{
name: "Medium",
id: 2,
labelStyle: "label-info"
},
{
name: "Mild",
id: 1,
labelStyle: "label-success"
}
];
var priorityOptionsFunc = [
{
name: "High",
id: 3,
labelStyle: "label-warning"
},
{
name: "Medium",
id: 2,
labelStyle: "label-info"
},
{
name: "Low",
id: 1,
labelStyle: "label-success"
}
];
var statusOptionsFunc = [
{
name: "Open",
id: 1,
labelStyle: "label-info"
},
{
name: "Closed",
id: 5,
labelStyle: "label-success"
}
];
var statusOptions = function () {
return statusOptionsFunc;
};
var priorityOptions = function () {
return priorityOptionsFunc;
};
var severityOptions = function () {
return severityOptionsFunc;
};
var findById = function (id, list) {
var i=0, len=list.length;
for (; i<len; i++) {
if (list[i].id == id) {
return list[i];
}
}
return {};
};
var toName = function (id, list) {
var i=0, len=list.length;
for (; i<len; i++) {
if (list[i].id == id) {
return list[i].name;
}
}
return id
};
return {
statusOptions: statusOptions,
priorityOptions: priorityOptions,
severityOptions: severityOptions,
toName: toName,
findById: findById
};
}]);
}());
html
<div ng-repeat="k in rowKeys | filter: '!0' | filter: '!$$'" ng-model="rowVal" >
<div ng-if="(k === 'id' || k.toLowerCase().endsWith('id') === false) ? true : false">
<label for="rowValue[{{$index}}]" class="col-sm-2">
{{k | hide:'.name' | makeUppercase }}:
</label>
<div class=" col-sm-2">
<input ng-if="!isObject(rowData[k])"
ng-disabled="disableInput(k)"
class="form-control rowValue"
id="rowValue[{{$index}}]"
ng-model="rowData[k]"/>
<input ng-if="isObject(rowData[k]) && k !== 'status' && k !== 'priority' && k !== 'severity' "
ng-disabled="disableInput(k)"
class="form-control rowValue"
id="rowValue[{{$index}}]"
ng-model="rowData[k].name"/>
<select ng-if="isObject(rowData[k]) && k == 'status'"
ng-model="k.statusId"
class="form-control rowValue"
id="statusId"
ng-options='item.id as item.name for item in eventService.statusOptions()' >
<option value=''>{{rowData[k].name}}</option>
</select>
<select ng-if="isObject(rowData[k]) && k == 'priority'"
ng-model="k.priorityId"
class="form-control rowValue"
id="priorityId"
ng-options='item.id as item.name for item in eventService.priorityOptions()' >
<option value=''>{{rowData[k].name}}</option>
</select>
<select ng-if="isObject(rowData[k]) && k == 'severity'"
ng-model="k.severityId"
class="form-control rowValue"
id="severityId"
ng-options='item.id as item.name for item in eventService.severityOptions()' >
<option value=''>{{rowData[k].name}}</option>
</select>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
与 @jbrown 一起战斗2小时后,我们打赌。在ng-repeat =(键,值)上更改ng-repeat并清除ng-model的代码。所以工作代码如下:
src
其余代码不需要更改。 plunker