Question

我需要使用以下数据创建一个两个组合框系统：

对于第一个组合框，我设法使用以下内容填充它：

<select ng-model="data.product" ng-options="prod.value as prod.value for 
prod in products"></select>

以上显示了产品清单。

第二个选择证明对我的魅力更具弹性，我不能只使用角度代码来完成它。

第二个应显示所选产品的可用组件

数据和结构如下：

[{
    "map": "product",
    "value": "product 1",
    "components": [{
        "name": "comp 1",
        "local": false
    }]
}, {
    "map": "product",
    "value": "product 2 ",

    "components": [{
        "name": "comp 1",
        "local": false
    }]
}]

我现在是一个具有以下结构的模型：

{
    "product":"product 1",
    "component":"comp 1"
}

Answer 1

我通过定义一个函数来解决这个问题，该函数使用第一个select中的模型值来返回正确的组件数组。有些想法如下：

<select ng-model="data.product" ng-options="prod.value as prod.value for 
prod in products"></select>
<select ng-model="data.component" ng-options="comp.name as comp.name for 
comp in components(data.product)"></select>

在我的角度代码中：

app.controller('DetailController', function($scope){
    $scope.components = function(value){
        var t =[];
        $scope.products.forEach(function(item){
            if(item.value===value)
                t = item.components;
        });
        return t;
    };
    });

这不是我想要的解决方案，所以我会不加思索地留下这个答案

Answer 2

angular.module('app', [])

angular.module('app').controller('sample', ['$scope',
    function($scope) { 
        $scope.products = [{
            "map": "product",
            "value": "product 1",
            "components": [{
                "name": "comp 1",
                "local": false
            }]
        }, {
            "map": "product",
            "value": "product 2 ",

            "components": [{
                "name": "comp 1",
                "local": false
            }]
        }];


    }
])

使用Html作为

<div ng-app="app" ng-controller="sample">
  <select ng-model="product" ng-options="prod.value for prod in products"></select>
  <select ng-model="component" ng-options="comp.name for comp in product.components"></select>
</div>

链接在angular-js中选择

2 个答案: