Question

正如您在代码中看到的，我有一个列表汽车A，B和C以及availableCars列表中的相应ID。我已经从服务中选择了汽车。它不仅仅是汽车名称的对象。用户可以选择不同的车，但在更改时，我必须将车辆ID发送到其他服务。有没有最简单的方法来实现我的目标？

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

Answer 1

而不是在＆＃34;选项＆＃34;上使用ng-repeat。 select中的元素，你可以使用＆＃34; ng-options＆＃34;。 ng-options

我创建了一个plnkr来说明你的例子。一些关键代码如下：

<强> 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;
     }

和

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

注意＆＃34; ng-change＆＃34;以及＆＃34; ng-options＆＃34;在html。

Answer 2

用户可以选择不同的汽车，但在更改时，我必须将汽车ID发送到其他服务

您可以使用ng-change：

<select ng-change="sendInfo(...)" ...>
...
</select>

实际上，我建议将汽车ID而不是汽车名称绑定到模型上。或者是汽车对象，可以切换到ng-options。这样你就可以发送所选的id。

如何从价值中获取Angular下拉列表中的ID？

2 个答案: