javascript - 模型不更新所选值 - AngularJS

Question

我正在努力从 JSON 对象创建一个表。我工作的 fiddle 位于 - https://jsfiddle.net/sukto1e0/4/

这是我的标记 -

<form ng-controller="RelCon as Rel">
  <div id="{{'rel' + $index}}" ng-repeat="relation in relations">
    <p>{{relation.MappingName}}</p>
    <div class="table-responsive">
      <table class="table table-hover src-tgt-table">
        <thead>
          <tr id="row0">
            <th>#</th>
            <th>{{relation.TargetName}}</th>
            <th>{{relation.SourceName}}</th>
            <th></th>
          </tr>
        </thead>
        <tbody ng-repeat="(key,value) in relation.columnMapping">
          <tr id="{{'row' + ($index + 1)}}">
            <th scope="row">{{$index + 1}}</th>
            <td>
              {{key}}
            </td>
            <td>
              <select ng-model="value" ng-options="j as j for (i,j) in relation.columnMapping">

              </select>
            </td>
            <td><span class="glyphicon glyphicon-pencil edit" aria-hidden="true"></span><span class="glyphicon glyphicon-ok edit hidden" aria-hidden="true"></span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <button type="button" ng-click="output()">
      print
    </button>
  </div>
</form>

这是 Controller -

    var app = angular.module('test', []);

    app.controller('RelCon', function($scope) {
      $scope.relations = [{
        "SourceName": "CUSTOMER_DATA",
        "MappingName": "m_Load_STAGING",
        "TargetName": "CUSTOMER_DATA_STG",
        "columnMapping": {
          "CUSTOMER_DATA_STG.STATE": "CUSTOMER_DATA.STATE",
          "CUSTOMER_DATA_STG.UPDATE_TIME": "CUSTOMER_DATA.NAME",
          "CUSTOMER_DATA_STG.PHONE": "CUSTOMER_DATA.PHONE",
          "CUSTOMER_DATA_STG.ADDRESS": "CUSTOMER_DATA.ADDRESS",
          "CUSTOMER_DATA_STG.NAME": "CUSTOMER_DATA.NAME",
          "CUSTOMER_DATA_STG.ZIP": "CUSTOMER_DATA.ZIP",
          "CUSTOMER_DATA_STG.SSN": "CUSTOMER_DATA.SSN",
          "CUSTOMER_DATA_STG.SOURCE_SYSTEM": "CUSTOMER_DATA.ADDRESS",
          "CUSTOMER_DATA_STG.EMAIL": "CUSTOMER_DATA.EMAIL",
          "CUSTOMER_DATA_STG.CUSTOMERID": "CUSTOMER_DATA.CUSTOMERID",
          "CUSTOMER_DATA_STG.CITY": "CUSTOMER_DATA.CITY"
        }
      }];
      $scope.output = function() {
        console.log($scope.relations);
      };
    });

在第二列中，当下拉列表中选择的值发生更改时，我需要更新模型。我使用选项正确填充了下拉列表，并将其设置为 JSON 中的默认值。

问题是当我更改任一下拉列表的选定值并单击控制台打印按钮时，我看不到更新的值。

请指导我做错了什么。

Answer 1

问题是您正在使用键值对。这会将一个字符串传递给您的 ng-model，结果是它不会创建双向绑定(bind)。我已经更新了你的 jsfiddle。

Miško 著名引言:

"..if you use ng-model there has to be a dot somewhere. If you don't have a dot, you're doing it wrong.."

我已将您的 HTML 更新为:

<tbody >
  <tr ng-repeat="mapping in relation.columnMapping" id="{{'row' + ($index + 1)}}">
    <th scope="row">{{$index + 1}}</th>
    <td>
      {{mapping.id}}
    </td>
    <td>
      <select ng-model="mapping.value" ng-options="j.value as j.value for (i,j) in relation.columnMapping">

      </select>
    </td>
    <td><span class="glyphicon glyphicon-pencil edit" aria-hidden="true"></span><span class="glyphicon glyphicon-ok edit hidden" aria-hidden="true"></span></td>
  </tr>
</tbody>

我已将您的模型更新为:

  $scope.relations = [{
    "SourceName": "CUSTOMER_DATA",
    "MappingName": "m_Load_STAGING",
    "TargetName": "CUSTOMER_DATA_STG",
    "columnMapping": [
      {id:"CUSTOMER_DATA_STG.STATE",value:"CUSTOMER_DATA.STATE"},
      {id:"CUSTOMER_DATA_STG.UPDATE_TIME",value:"CUSTOMER_DATA.NAME"},
      {id:"CUSTOMER_DATA_STG.PHONE",value: "CUSTOMER_DATA.PHONE"},
      {id:"CUSTOMER_DATA_STG.ADDRESS",value: "CUSTOMER_DATA.ADDRESS"},
      {id:"CUSTOMER_DATA_STG.NAME",value: "CUSTOMER_DATA.NAME"},
      {id:"CUSTOMER_DATA_STG.ZIP",value: "CUSTOMER_DATA.ZIP"},
      {id:"CUSTOMER_DATA_STG.SSN",value: "CUSTOMER_DATA.SSN"},
      {id:"CUSTOMER_DATA_STG.SOURCE_SYSTEM",value: "CUSTOMER_DATA.ADDRESS"},
      {id:"CUSTOMER_DATA_STG.EMAIL",value: "CUSTOMER_DATA.EMAIL"},
      {id:"CUSTOMER_DATA_STG.CUSTOMERID",value: "CUSTOMER_DATA.CUSTOMERID"},
      {id:"CUSTOMER_DATA_STG.CITY",value: "CUSTOMER_DATA.CITY"}
    ]
  }];

https://jsfiddle.net/039wfm6w/1/