Question

我开始学习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>

这是角度脚本文件。

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

Answer 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语法，使用条件标签下拉列表功能。

希望这有帮助！

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

JS

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

每个ng-repeat使用过滤器，其字符串是什么类型的选择。这将过滤掉任何不同selection

的选项

根据单选按钮更新选择

2 个答案: