角度选择不起作用

时间:2014-01-16 12:28:41

标签: javascript angularjs

控制器

$scope.formData = {};
$scope.formData.cars = {};
$scope.formData.cars.list = [
    { id: 1, name: 'vw 2'},
    { id: 2, name: 'vw 1'}
];
$scope.formData.cars.selected = $scope.formData.cars.list[0];

HTML

<select id="bookingCars" class="form-control" ng-model="formData.cars.selected" ng-options="car.code as car.name for car in formData.cars.list">

任何人都可以解释为什么这会添加第3个空白元素以及为什么第一个属性(vw 2)不是默认值?

3 个答案:

答案 0 :(得分:2)

试试这个:

ng-options="car as car.name for car in formData.cars.list"

它应该有效:plunk

您在ngOption表单中使用select as label for value in arrayDocumentation说:

  

选择:此表达式的结果将绑定到模型   父元素。如果未指定,则选择表达式   默认为值。

因此,这意味着您希望select部分成为对象,但是您提供了字符串car.code

答案 1 :(得分:1)

您不应使用对象来设置所选值,因为您使用的是汽车的值“id”。

所以做这样的事情:

 $scope.formData = {};
 $scope.formData.cars = {};
 $scope.formData.cars.list = [
                        { id: 1, name: 'vw 2'},
                        { id: 2, name: 'vw 1'}
                    ];
$scope.formData.cars.selected = $scope.formData.cars.list[1].id;

<select id="bookingCars" class="form-control" ng-model="formData.cars.selected" ng-options="car.id as car.name for car in formData.cars.list">

http://jsfiddle.net/KLDEZ/2/

答案 2 :(得分:1)

如果要将整个对象用作值,则以下内容将起作用:

 {{formData.cars.selected}} -      {{formData.cars.selected.id}}
 <select id="bookingCars" class="form-control" ng-model="formData.cars.selected" 
 ng-options="c.name for c in formData.cars.list">

http://plnkr.co/edit/QZtEKWeXeHC9kcuEeGNi?p=preview