3

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>
7
  • I'm trying to follow what you are doing. Why do you have both rowKeys and rowData? What doesn't rowData do for you that rowKeys does being that rowKeys appears to be just the keys from rowData? Commented Jun 15, 2016 at 17:45
  • @jbrown so rowKeys has been created with only one purpose to get keys of rowData, the value for this keys comes from rowData Commented Jun 15, 2016 at 18:06
  • I forked your plunker plnkr.co/edit/xQpiZYwocRTSv1G1Ctzr?p=preview I know its not the complete solution but I stripped out some things (ng-diabled, ng-if, ...) to try and get down to what I think you're trying to accomplish. Let me know if I'm on the right track. Commented Jun 15, 2016 at 18:14
  • @jbrown you are definitely on the right way but Just noticed, I need to display keys.. Commented Jun 15, 2016 at 18:16
  • I updated the plunker to show the key Commented Jun 15, 2016 at 18:24

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.