Question

我有一个包含产品名称和版本的多维数组。我想创建一个界面，让用户从选择框中选择产品，然后在第二个选择框中选择版本号。第二个选择框应仅显示用户在第一个选择框中选择的产品的版本号。

这是我的多维数组：

[Object]0: 
         name: "Product 1"
         versions: [Array]0:
                           number: "1.0"
                           number: "1.5.2"
        1: 
         name: "Product 2"
         versions: [Array]0:
                           number: "0.0"
                           number: "0.5"

用户可以选择多个产品，因此我创建了一个数组来保存用户选择。

我的控制器设置如下：

app.controller('mainController', function ($scope) {

    $scope.products = [{id: 1, name: '', versions: []}];

  $scope.packages = [];
  $scope.packages[0] = { id: 1, name: 'Product 1', versions: [{number: 1.0}, {number: 1.5}, {number: 2.0}]};
  $scope.packages[1] = { id: 2, name: 'Product 2', versions: [{number: 0.1}, {number: 0.2}, {number: 0.3}]};

    $scope.addProduct = function(){
    var id = $scope.products.length + 1;
    $scope.products.push({id: id, name: "", version: []});

  };
});

选择框的设置如下：angularjs：

    <div  ng-repeat="product in products">
       <label>Product</label>
       <select ng-model="product.product" ng-options="package.name for package in packages" class="form-control"></select>

       <label>Version</label>
       <select ng-model="product.versions" ng-options="version.number for version in product.versions" class="form-control"></select>
</div>
<button ng-click="addProduct()">Add Product</button>

我尝试做的是设置ng-options以选择当前产品的版本对象。但这不起作用。

我创建了一个我目前拥有的jsFiddle： http://jsfiddle.net/rkyu4rjq/

对于如何将版本选择框与所选产品相关联，我们非常感谢。

TIA

Answer 1

尽管我并没有真正记录为每个产品选择的版本，但我修复了您的相对选择选项。

您可以找到solution here。这应该可以帮助你！

Answer 2

我错过了很简单的事情。

在版本选择框绑定中，我应该使用version.number for version in product.product.versions而不是version.number for version in product.versions

这是一个有效的jsFiddle：http://jsfiddle.net/rkyu4rjq/2/

Angularjs多维数组和两个相对选择框

2 个答案: