按名称选择并使用 Angular 获取所选项目的 Id答案

【问题标题】：Select by name and get the Id of the selected item with Angular按名称选择并使用 Angular 获取所选项目的 Id
【发布时间】：2017-03-24 22:15:21
【问题描述】：

我在一个带有 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

感谢您的帮助！

【问题讨论】：

标签： angularjs asp.net-mvc html

【解决方案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>

【讨论】：

【解决方案2】：

为了让第二种情况起作用，您需要像这样在控制器中获取国家/地区的 ID：

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

【讨论】：

没错！这就是我要避免的，可以通过在 HTML 中以声明性模式执行所有操作来避免这种情况？
我不知道。无论您是从提供的名称（意大利）派生 id 还是整个对象，还是进行一些 jQuery 操作……您的所有选项都指向控制器代码。
感谢大家的大力帮助！

【解决方案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 = "";

希望对你有帮助

【讨论】：

【解决方案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 中

【讨论】：

【解决方案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;
      }
  };

plunkerhere

【讨论】：