无法在字符串 angularjs 上创建 属性

Question

我正在从 api 请求中获取表单，其中一些字段基于 ng-options。选项数据来自 angular 服务。所以在页面上它看起来像： 打开表格后：

1. 取决于键，字段可以是：
   • 禁止修改
   • 允许修改
2. 启用修改字段可以是：
   • 简单输入
   • 有选项

现在一切都很好，表单已打开并呈现。现在如果我想修改一些东西，可以毫无问题地修改简单的输入字段，并且可以在数据库中更改，但是如果我想修改选项字段，我会收到以下错误：

优先级：

Cannot create property 'priorityId' on string 'priority'

严重程度：

Cannot create property 'severityId' on string 'severity'

状态：

Cannot create property 'statusId' on string 'status'

我的错误在哪里？这是 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>

Answer 1

在与 @jbrown 一起战斗 2 小时后，我们敢打赌。在 ng-repeat=(key,value) 上更改 ng-repeat 并清除 ng-model 的代码。所以工作代码看起来像：

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

其余代码无需更改。 plunker