У меня есть многомерный массив, содержащий имена и версии продуктов. Я хочу создать интерфейс, который позволяет пользователю выбирать продукт из окна выбора, а затем номер версии во втором поле выбора. Во втором окне выбора должны отображаться только номера версий продукта, которые пользователь выбрал в первом поле выбора.
Это мой мутимерный массив:
[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/
Я был бы очень признателен за любые предложения о том, как связать окно выбора версии с выбранным продуктом.
ТИА
Я пропустил что-то очень простое.
В поле выбора варианта выбора я должен использовать version.number for version in product.product.versions
вместо version.number for version in product.versions
Вот рабочий jsFiddle: http://jsfiddle.net/rkyu4rjq/2/
Несмотря на то, что я действительно не отслеживаю, какая версия выбрана для каждого продукта, я исправил ваши варианты относительного выбора.
Вы можете найти solution
здесь. Это должно помочь вам!