具有复杂对象的角度选择元素答案

【问题标题】：Angular select element with complex object具有复杂对象的角度选择元素
【发布时间】：2015-12-16 01:30:21
【问题描述】：

在我正在构建的 Angular 应用中的选择元素方面需要一些帮助。

假设我有下面的代码，在选择元素中选择一个选项时，更改每个项目的属性“childId”的最佳方法是什么？

使用下面的代码，当我选择一个元素时，它只会为所选对象设置“子”属性，我可以理解为什么。我唯一的问题是我还需要设置“childId”属性，那么正确的方法是什么？

<div ng-app="CustomApp" ng-controller="CustomCtrl">
  <table class="table">
    <thead>
      <tr>
        <th>Description</th>
        <th>Child</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in dataItems">
        <td>
          <input name="Item[{{$index}}].Description"
                 value="{{item.description}}"
                 type="text"
                 class="form-control" />
        </td>
        <td>
          <select name="Item[{{$index}}].Child" 
                  ng-model="item.child" 
                  ng-options="ichild as ichild.description for ichild in
                              $parent.childItems track by ichild.id">
            <option value="">Select one option...</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

(function () {
    "use strict";
    var app = angular.module('CustomApp', []);
    app.controller('CustomCtrl', ['$scope', 
      function($scope) {
        $scope.dataItems = [
          { id: 1, description: 'foo one', childId: 1, child: { id: 1, description: 'bar01' }},
          { id: 2, description: 'foo two', childId: 0 },
          { id: 3, description: 'foo three, childId: 2, child: { id: 2, description: 'bar02' }}
        ];

        $scope.childItems = [
          { id: 1, description: 'bar01' },
          { id: 2, description: 'bar02' }
        ];
      }]);
})();

【问题讨论】：

标签： angularjs html-select angular-ngmodel ng-options

【解决方案1】：

我想，这就是你想要做的[其实我希望]：

<!doctype html>
<html>

<head>
</head>

<body>
  <div ng-app="CustomApp" ng-controller="CustomCtrl">
    <table class="table">
      <thead>
        <tr>
          <th>Description</th>
          <th>Child</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in dataItems">
          <td>
            <input name="Item[{{$index}}].description" ng-model="item.description" type="text" class="form-control" />{{item.description}}
          </td>
          <td>
            <select name="Item[{{$index}}].child" ng-model="item.child" ng-options="ichild as ichild.description for ichild in $parent.childItems track by ichild.id"></select>
            {{item.child}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="/Scripts/angular.js"></script>
  <script>
    (function() {
      "use strict";
      var app = angular.module("CustomApp", []);
      app.controller("CustomCtrl", ["$scope",
        function($scope) {
          $scope.dataItems = [{
            id: 1,
            description: "foo one",
            childId: 1,
            child: [{
              id: 1,
              description: "bar01"
            }]
          }, {
            id: 2,
            description: "foo two",
            childId: 0
          }, {
            id: 1,
            description: "foo three",
            childId: 2,
            child: [{
              id: 2,
              description: "bar02"
            }]
          }];

          $scope.childItems = [{
            id: 1,
            description: "bar01"
          }, {
            id: 2,
            description: "bar02"
          }];
        }
      ]);
    })();
  </script>
</body>

</html>

【讨论】：