Anton Anton - 4 months ago 124
AngularJS Question

Cannot create property on string angularjs

I'm getting form from api request, some of this fields based on ng-options. The data for options comes from angular services. So on the page it looks like:
after form has been opened:


  1. depends on key, fields can be:


    • disabled for modifications

    • enabled for modifications


  2. enabled for modifications fields can be:


    • with simple input

    • with options




For now everything is good, form has been opened and rendered. Now if I want to modify something, simple input fields can be modified without any problem, and can be changed in db, but if I want to modified options fields, I'm getting this errors:

for priority:


Cannot create property 'priorityId' on string 'priority'


for severity:


Cannot create property 'severityId' on string 'severity'


for status:


Cannot create property 'statusId' on string 'status'


Where is my mistake? this is plunker

my services

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

Answer

after 2 hours battle together with @jbrown we bet that. Change ng-repeat on ng-repeat=(key,value) and clear code for ng-model. So working code look like:

        <div ng-repeat="(key, value) in rowData">
          <div ng-if="(key === 'id' || key.toLowerCase().endsWith('id') === false) ? true : false">
          <label for="value" class="col-sm-2">{{key}}</label>
           <div class=" col-sm-2">
           <input class="form-control rowValue"
           ng-if="!isObject(rowData[key])"
          type="text" ng-model="value"/>
       <input
       class="form-control rowValue"
       ng-if="isObject(value) && key !== 'status' && key !== 'priority' && key !== 'severity'"
           type="text" ng-model="value.name"/>

    <select ng-if="isObject(value) && key == 'status'"
    ng-model="statusId"
    class="form-control rowValue"
    id="statusId"
    ng-options='item.id as item.name for item in eventService.statusOptions()' >
      <option value=''>{{value.name}}</option>
      </select>
      <select ng-if="isObject(value) && key == 'priority'"
      ng-model="priorityId"
      class="form-control rowValue"
      id="priorityId"
      ng-options='item.id as item.name for item in eventService.priorityOptions()' >
        <option value=''>{{value.name}}</option>
        </select>
        <select ng-if="isObject(value) && key == 'severity'"
        ng-model="severityId"
        class="form-control rowValue"
        id="severityId"
        ng-options='item.id as item.name for item in eventService.priorityOptions()' >
          <option value=''>{{value.name}}</option>
          </select>
     </div>
   </div>
 </div>

the rest of code doesn't need to change. plunker