按名称选择并使用Angular获取所选项目的ID

Question

我正在使用HTML和angular进行MVC项目。 我有一个选择列表，根据输入框中输入的名称进行选择，但我无法获得ID。

这样可行，但我没有得到所选项目的ID：

<input type="text" ng-model="selectedCountry">
    <select class="form-control" 
    ng-model="selectedCountry" 
    ng-options="country.name as country.name for country in countries">
<option value="">Select Country</option>

这不起作用，因为我无法通过名称选择并获得ID：

<input type="text" ng-model="selectedCountry">
  <select class="form-control" 
    ng-model="selectedCountry" 
    ng-options="country.id as country.name for country in countries">
<option value="">Select Country</option>

以下是plunker：Plunker

感谢您的帮助！

Answer 1

<select class="form-control"  data-ng-change="call(country.id)"
        ng-model="country.id" 
        ng-options="country.id as country.name for country in countries">
    <option value="">Select Country</option>
  </select>

Answer 2

为了使第二种方案有效，您需要在控制器中获取国家/地区的ID，如下所示：

  $scope.selectedCountry = $scope.countries.find(function(country) {
    return country.name === "Italy";
  }).id;

Answer 3

试试这个

HTML

<input type="text" ng-model="selectedCountryId">
  <select class="form-control" ng-model="selectedCountryId">
  <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>
<div>selected country id: {{selectedCountryId}} </div>

在控制器中添加$scope.selectedCountryId = "";

希望有所帮助

Answer 4

或者

<input type="text" ng-model="selectedCountry.name">
  <select class="form-control" 
        ng-model="selectedCountry" 
        ng-options="country as country.name for country in countries">
    <option value="">Select Country</option>

  </select>

在您的HTML中

和

$scope.selectedCountry = {};

在你的javascript中

Answer 5

当您在不同的选择中使用相同的模型时，我认为不可能使用不同的模型键。

我会在两个模型中使用该名称，然后从数组中获取id：

$scope.getId = function(){
    var co = $scope.countries.filter(function (el) {  return el.name == $scope.selectedCountry });
      if(typeof co !== 'undefined' && co.length > 0){
        $scope.selectedId =co[0].id;
      }else{
        $scope.selectedId = null;
      }
  };

plunker here