只获得一级 object

Question

我的 object select 通过 select 离子框打印在页面上作为用户 select 的选项。

但是它当前打印 parent object 和嵌套在 parent object.

中的所有其他 object

我的数组示例

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

我的angular和htmlselect离子盒

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

所以目前当我 select parent 我得到

{"ProductType":{"Pname":"parent","format":[{"Fname":"child","id":"4"},{"Fname":"second child","id":"5"}]}}

我希望看到的

{"ProductType":{"Pname":"parent"}}

我需要的

我只想看 Pname 所以顶层 objects 例如 parent, parent2, parent3 等等而不是 children objects.

我怎样才能改变它只显示顶层 object？

@George 回答差不多就可以了

我的第二个下拉菜单的难度应该用 selected parent 的 child object 填充，如果 select parent 来自第一个选项，然后第二个 child 来自第二个选项。

ProductType: Pname: parent, formatType: Fname: child

**Angular 两个框的代码，第二个填充 selected parent 的 children **

 <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

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

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

Answer 2

如果您阅读了关于 ngOptions 的文档，您可以使用 select as 来指定对象是在 ngModel

上设置的

对于第二个 select 我建议在第一个 select 上有一个 ng-change 以将该对象存储在范围内的另一个变量中，您可以将其用于第二个 [=27] =].

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);
  }
}

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

只获得一级 object

Only get first level object

javascript

angularjs

angular-ngmodel