ng-model和dropdown,获取名称,而不是价值

时间:2013-07-21 14:49:56

标签: javascript html angularjs

我正在尝试在下拉列表中读取所选的选项名称/ text / html,而不是通过angular.js读取它的值。我是这样做的,但这会返回值,而不是名称:

在我的HTML中

<select class="SelectCar" ng-model="SelectedCar"> 
   <option ng-repeat="car in cars" value="{{car.Guid}}">
      {{car.Name}}
   </option>
</select>

在我的控制器中

var car = $scope.SelectedCar;

“car”的价值将是car.Guid,但我想将汽车返回。姓名。我无法删除car.Guid的值,因为这个Guid被我的应用程序中的另一个组件使用。

1 个答案:

答案 0 :(得分:8)

您需要使用ng-options中的“as”。它允许您在存储另一个值时显示一个值。看看下面的代码块:

来自我的控制器:

$scope.cars = [
    {name:'Nissan', guid:'1-9'},
    {name:'Toyota', guid:'1-23'},
    {name:'Ford', guid:'8-43'},
    {name:'Honda', guid:'2-6'},
    {name:'Datsun', guid:'1-55'}
];
$scope.selectedCar = $scope.cars[1].guid;

来自我的HTML:

<select ng-model="selectedCar" ng-options="car.guid as car.name for car in cars"></select>
<div>
    Selected Color: {{selectedCar}}   
</div>

这是一个jsFiddle