[英]How to get ID from Angular dropdown from value?
As you can see in the code, I have a list cars Car A,B, and C with corresponding ids in availableCars list. 正如您在代码中看到的那样,我在availableCars列表中有一个列出了汽车A,B和C以及相应的ID。 I'm getting already chosen car from a service.
我已经从服务中选择了汽车。 It is not an object just the car name.
它不仅是汽车名称,而且不是对象。 User has option to choose different car but on change, I have to send car id to other service.
用户可以选择其他汽车,但是在更改时,我必须将汽车ID发送给其他服务。 Is there any simplest way to achieve my goal?
有没有最简单的方法可以实现我的目标?
(function(angular) { 'use strict'; angular.module('ngrepeatSelect', []) .controller('ExampleController', ['$scope', function($scope) { $scope.carName = (function getCarNameFromService(){ return 'Car B'; })(); $scope.availableCars = [ {id: '1A', name: 'Car A'}, {id: '2B', name: 'Car B'}, {id: '3C', name: 'Car C'} ] }]); })(window.angular);
<html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-ngrepeat-select-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="app.js"></script> </head> <body ng-app="ngrepeatSelect"> <div ng-controller="ExampleController"> <form name="myForm"> <label for="repeatSelect"> Repeat select: </label> <select name="repeatSelect" id="repeatSelect" ng-model="carName"> <option ng-repeat="option in availableCars" value="{{option.name}}">{{option.name}}</option> </select> </form> <hr> <tt>selected car name = {{carName}}</tt><br/> <tt>selected car id = ???</tt><br/> </div> </body> </html>
Rather than using an ng-repeat on the "option" element inside of a select, you can use "ng-options". 您可以使用“ ng-options”,而不是在select内的“ option”元素上使用ng-repeat。 ng-options
ng-options
I created a plnkr to illustrate your example. 我创建了一个plnkr来说明您的示例。 Some of the key pieces of code are as follows:
一些关键代码如下:
JS JS
var carName = "Car B"; //name provided to this controller
$scope.availableCars = [
{id: '1A', name: 'Car A'},
{id: '2B', name: 'Car B'},
{id: '3C', name: 'Car C'}
]
$scope.selectedCar = $scope.availableCars.filter(function(car){
return car.name === carName;
})[0];
$scope.selectedId = $scope.selectedCar.id;
$scope.updateCar = function(id){
$scope.selectedId = id;
}
and 和
HTML 的HTML
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select ng-options="car as car.name for car in availableCars" ng-model="selectedCar" ng-change="updateCar(selectedCar.id)"></select>
</form>
Notice the "ng-change" and the "ng-options" in the html. 注意html中的“ ng-change”和“ ng-options”。
User has option to choose different car but on change, I have to send car id to other service
用户可以选择其他汽车,但是在更改时,我必须将汽车ID发送给其他服务
You could use ng-change
for that: 您可以为此使用
ng-change
:
<select ng-change="sendInfo(...)" ...>
...
</select>
Actually, I would advise to bind to the model the car id instead of the car name. 实际上,我建议将汽车ID(而不是汽车名称)绑定到模型。 Or a car object, providing you switch to
ng-options
. 或汽车对象,请您切换到
ng-options
。 That way you could send the selected id. 这样,您可以发送选定的ID。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.