Question

当用户选择选项时，我通过页面上打印的选择框选择了我的对象。

但是它当前打印父对象和嵌套在父对象中的所有其他对象。

我的数组的一个例子

$scope.productsandformats = [
     {
                "Pname": "parent",
                "format": [
                    {"Fname": "child", "id": "4"},
                    {"Fname": "second child", "id": "5"}
                ]
            }
];

我的角度和HTML选择框

<select ng-model="formData.ProductType"
        ng-options="product.Pname for product in productsandformats">
     <option value="">- Please Choose -</option>
</select>

<pre class="col-sm-12 ng-binding">
   {{ formData }}
</pre>

所以目前我选择parent时我得到了

{“ProductType”：{“Pname”：“parent”，“format”：[{“Fname”：“child”，“id”：“4”}，{“Fname”：“second child”， “ID”： “5”}]}}

我期待看到的内容

{ “ProductType”：{ “PNAME”： “母体”}}

我需要什么

我只想查看Pname所以顶级对象，例如parent, parent2, parent3，而不是子对象。

如何更改此选项才能显示顶级对象？

@George回答几乎有效

难度我的第二个下拉列表应填充所选父项的子对象，如果从第一个选项中选择父项，则从第二个选项中选择第二个子项时，最终字符串应如下所示。

ProductType：Pname：parent，formatType：Fname：child

**两个框的角度代码，第二个填充了所选父级的子项**

 <select ng-model="formData.ProductType"
            ng-options="product.Pname for product in productsandformats">
        <option value="">- Please Choose -</option>
    </select>

    <select ng-model="formData.formatType"
            ng-options="format.Fname for format in formData.ProductType.format"
            ng-if="formData.ProductType">
        <option value="">- Please Choose -</option>
    </select>

Answer 1

如果您阅读了ngOptions上的文档，则可以使用select as来指定ngModel上的对象设置

对于第二个选择我建议在第一个选择中使用ng-change将该对象存储在可用于第二个选择的范围上的另一个变量中。

＆＃13;

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.productsandformats = [{
    "Pname": "parent",
    "format": [{
      "Fname": "child",
      "id": "4"
    }, {
      "Fname": "second child",
      "id": "5"
    }]
  }];

  $scope.formats = [];

  $scope.productTypeChange = function() {
    $scope.formats = $scope.productsandformats.find(ps => ps.Pname == $scope.formData.ProductType.Pname);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <select ng-model="formData.ProductType.Pname" ng-change="productTypeChange()" ng-options="product.Pname as product.Pname for product in productsandformats">
    <option value="">- Please Choose -</option>
  </select>
    <select ng-model="formData.formatType" ng-options="format.Fname for format in formats.format" ng-if="formData.ProductType.Pname">
    <option value="">- Please Choose -</option>
  </select>
    <pre class="col-sm-12 ng-binding">
   {{ formData }}
   </pre>
  </div>

</div>

＆＃13;

Answer 2

您可以像这样访问第一级对象

<div ng-repeat='p in formData.productType'>
{{p.pname}}
</div>

只获得第一级对象

2 个答案: