Как попасть в список в раскрывающемся списке angularjs?

Question

У меня есть объект, который я хочу создать в раскрывающемся списке, как этот

$scope.cars = [
    [
            {model : "Ford Mustang", color : "red"},
            {model : "Lambo", color : "red"}            
    ]
    ,
    [
            {model : "Fiat 500", color : "white"},
            {model : "Ferarri", color : "orange"}           
    ],
    [
            {model : "Volvo XC90", color : "black"},
            {model : "Nissan", color : "blue"}            
    ]
];

мой код UI, как это:

<div ng-repeat="data in cars">
<select ng-model="selectedCars[$index]" ng-options="car.model for car in data">
</select>

Теперь я хочу получить доступ к выбранному элементу для каждого выпадающего списка, кто-нибудь может мне помочь?

Answer 1

Полагаю, это то, что вы ищете - ' связывает массив как модель для списка выпадающих списков '

используйте синтаксис ng-options="car.model as car.model for car in data", это свяжет свойство model объекта car с ng-моделью выбранного вами элемента.

<div ng-repeat="data in cars">
    <select ng-model="selectedCars[$index]" ng-options="car.model as car.model for car in data">
    </select>
</div>
{{selectedCars}}

образец plnkr здесь .

Answer 2

Просто используйте разные variablename для модели ng, и вы можете получить доступ, используя $scope.variablename

<select ng-model="selected" ng-options="car.model for car in data">
   <option value="x"></option>
</select>

и в контроллере,

console.log($scope.selected);

DEMO

var app = angular.module('testApp',[])
app.controller('testController',function($scope){
$scope.select = [];
$scope.cars = [
    [
            {model : "Ford Mustang", color : "red"},
            {model : "Lambo", color : "red"}            
    ]
    ,
    [
            {model : "Fiat 500", color : "white"},
            {model : "Ferarri", color : "orange"}           
    ],
    [
            {model : "Volvo XC90", color : "black"},
            {model : "Nissan", color : "blue"}            
    ]
];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController">
<div ng-repeat="data in cars">
<select  ng-init="select[$index]=data" ng-model="select[$index]" ng-options="car.model for car in data">
</select>
 <div ng-repeat="tmp in select track by $index">
      {{tmp}}
    </div>
</div>