Question

在我建立的Angular应用中需要一些选择元素的帮助。

假设我有以下代码，那么改变财产的最佳方式是什么？childId＆＃39;选择元素中的选项时每个项目的？

使用下面的代码，当我选择一个元素时，它只会设置＆＃39; child＆＃39;具有所选对象的属性，我可以理解为什么。我唯一的问题是我还需要设置＆＃39; childId＆＃39;财产，那么实现这一目标的正确方法是什么？

<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' }
        ];
      }]);
})();

Answer 1

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

＆＃13;

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

＆＃13;

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

1 个答案: