Question

我正在从JSON对象创建表。我工作的小提琴是在 - 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>

这是控制器 -

    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，结果是它不会创建双向绑定。我已经更新了你的jsfiddle。

Miško着名的qoute：

“..如果你使用ng-model，必须在某个地方有一个点。如果你没有有一个点，你做错了..“

我已将您的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/

模型不会使用选定的值更新 - AngularJS

1 个答案: