如何在angularjs的下拉列表中选择?

时间:2019-01-15 04:22:34

标签: angularjs

我有要创建的对象,像这样的下拉列表

$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"}            
    ]
];

我的用户界面代码如下:

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

现在我想访问每个dropwwon的选定项目,任何人都可以帮助我吗?

2 个答案:

答案 0 :(得分:0)

只需对ng-model使用其他 variablename ,就可以使用 $scope.variablename

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

并在控制器中

console.log($scope.selected);

演示

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>

答案 1 :(得分:0)

我想这就是您要寻找的-'将数组绑定为下拉列表的模型'

使用语法ng-options="car.model as car.model for car in data",这会将model对象的car属性绑定到您选择元素的ng-model。

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