根据单选按钮更新选择答案

【问题标题】：Update the Selection according to radio button根据单选按钮更新选择
【发布时间】：2017-01-25 17:04:42
【问题描述】：

我已经开始学习 Angularjs。我正在关注 w3schools 教程，我需要尝试一些东西。

在这里，我想根据我检查的单选按钮列出下拉列表。（当我选择名称时，我只需要下拉列表中的名称，当我选择城市时，我只需要下拉列表中的城市等等）。

    <body ng-app="myApp" ng-controller="myController">
     <div>
        <input type="radio" ng-model="selection" value="Name">Name
        <input type="radio" ng-model="selection" value="Country">Country
        <input type="radio" ng-model="selection" value="City">City
        <br>
       <div ng-switch="selection">
        <div ng-switch-when="Name">
         <ul>
           <li ng-repeat="x in names">{{x.Name}}</li>
         </ul>
        </div>
        <div ng-switch-when="Country">
         <ul>
           <li ng-repeat="x in names">{{x.Country}}</li>
         </ul>
        </div>
        <div ng-switch-when="City">
         <ul>
           <li ng-repeat="x in names">{{x.City}}</li>
         </ul>
        </div>
       </div>
       <br>
      <select ng-model="selectedName" ng-options="x.Name for x in names"></select>
     </div>
    </body>

这是 Angular 脚本文件。

    var app = angular.module('myApp',[]);
    app.controller('myController', function($scope,$http){
      $http.get('http://www.w3schools.com/angular/customers.php')
     .then(function(response){
      $scope.names = response.data.records;
      });
    });

【问题讨论】：

标签： javascript angularjs json api

【解决方案1】：

如果我理解正确，对于您的 <select> 元素，您希望根据从 ng-model="selection" 单选输入项中的选择有条件地显示标签。您可以使用 ng-options 中的函数来定位标签的属性，该属性基于传入正在迭代的项目的选择以及来自无线电输入的选择：

JS：

$scope.foo = function(x, selection) {
  switch(selection) {
    case 'Name':
      return x.Name;
      break;
    case 'City':
      return x.City;
      break;
    case 'Country':
      return x.Country;
    default:
      return x.Name;
  }
}

HTML：

<select ng-model="selectedName" ng-options="x.Name as foo(x, selection) for x in names"></select>

这是一个Plunker，显示ng-options 和as 语法，利用条件标签下拉显示功能。

希望对您有所帮助！

【讨论】：

非常感谢。这正是我所需要的。

【解决方案2】：

您可以组合您的 ng-repeat 并在选项上使用过滤器。

html

            <select class="form-control" ng-model="selectedName">
                <option value="" selected disabled>Select Name</option>
                <option ng-repeat="n in names" value="{{n.Name}}">{{n.Name | filter:isSelection('Name')}}</option>
                <option ng-repeat="n in names" value="{{n.Country}}">{{n.Country| filter:isSelection('Country')}}</option>
                <option ng-repeat="n in names" value="{{n.City}}">{{n.City| filter:isSelection('City')}}</option>
            </select>

$scope.isSelection = function(x){
    return x == $scope.selection;
}

每个ng-repeat 都使用带有选择类型字符串的过滤器。这将过滤掉任何与selection不同的选项

【讨论】：