Question

我的页面上有3个不同的选择框。如果我选择了一个选项在第一个选择框中，我希望选项在第二个选择框中更改为属于您在第一个选择框中选择的值的选项。

我想和第三个选择框一样。如果我在第二个选择框中选择了一个选项，我希望第三个选择框中的选项更改为属于第二个选择框中的值的顶部。

如何在AngularJS中尽可能简单地提出建议？

Answer 1

您可以通过ng-options使用角度过滤器来实现此目的

<强>控制器

angular.module('app', [])
  .controller('Ctrl', function($scope) {
    $scope.countries = {
      'India': {
        'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
        'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],
      },
      'USA': {
        'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
        'Los Angeles': ['Burbank', 'Hollywood']
      },
      'Australia': {
        'New South Wales': ['Sydney', 'Orange', 'Broken Hill'],
        'Victoria': ['Benalla', 'Melbourne']
      }
    };
  })

<强>标记

 <div ng-controller="Ctrl">
    <div class="container">>
      <div class="form-group">
        <label class="control-label" for="Country">Country:</label>
        <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="States">States:</label>
        <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="City">City:</label>
        <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
          <option value=''>Select</option>
        </select>
      </div>
    </div>
  </div>

Working Plunkr

Answer 2

只需使用ng-change指令，并从控制器调用函数来执行您想要的任何逻辑。

<select "ng-change"="item_change(selectedItem)" "ng-model"="selectedItem" "ng-options"="item.id as item.name for item in items">

Answer 3

HTML：

<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="sct.js"></script>
</head>

<body >
<div ng-controller="MyCtrl">
<select ng-model='selectedNumber' ng-change="adv(selectedNumber);" ng-options='number for number in numbers'></select>
 num:   {{selectedNumber}}
<select ng-model='selected' ng-options="number for number in numbers">   </select>
num:   {{selected}}
<button ng-click="add()" >add</button>
</div>
</body>
</html>

JS：

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {    
$scope.numbers = [1,2,3,4,5,6,7,8,9,10];
$scope.num = angular.copy($scope.numbers);
$scope.selectedNumber = $scope.numbers[0];
//$scope.selected = $scope.num[0];

$scope.add=function(){
$scope.num = angular.copy($scope.numbers);
}

$scope.adv = function(selectedNumber){
$scope.num = angular.copy($scope.numbers);
$scope.selected = $scope.numbers[selectedNumber -1]; 
//var a = $scope.num.splice(selectedNumber-1, 1);  
}

$scope.num = angular.copy($scope.numbers);
});

希望它能帮到你

Answer 4

这里贴出了国家，州和城市的代码......就像你想要的一样......

只需创建state.php和city.php并以json格式输出数据。

<script type="text/javascript" src="angular.min.js">
    var app=angular.module("placesApp",[]); //Angular JS App
        app.controller("placesController",["$scope","$http",function($scope,$http){
    $http.get("country.php").success(function(response) //Get Countries from country.php
      {
    $scope.countries=response; //Store the data/response in a variable
      });

    $scope.getStates=function()
            {
                $http.post('state.php',{countryId:$scope.places.country}).success(function(data)
                {
                    $scope.states=data;
                });
            }
    $scope.onStateChange=function()
        {
            $http.post("city.php",{stateId:$scope.places.state}).success(function(data)
            {
                if(data!="")
                {                   
                    $scope.cities=data;
                }
            });
        }

        $scope.submitForm = function()
        {
            $scope.submitted = true;
        }
    }]);
</script>
    <body ng-app="placesApp">
<div ng-controller="placesController">
<form name="placesForm" id="placesForm" method="post" action="">
Countries:<select name="country" id="country" ng-model="places.country" ng-required="true" ng-change="onCountryChange()" ng-options="cou.CountryId as cou.CountryName for cou in countries">
                        <option value="">Select Country</option>
                    </select>
States: <select name="state" id="state" ng-model="places.state" ng-required="true" ng-change="onStateChange()" ng-options="sta.StateId as sta.StateName for sta in states">
                        <option value="" style="display:none;">Select State</option>
                    </select>
Cities:<select name="city" id="city" ng-model="places.city" ng-required="true" ng-options="cit.CityId as cit.CityName for cit in cities">
                        <option value="" style="display:none;">Select City</option>
                    </select>
<input type="submit" name="submit" id="register" value="Submit" ng-click="submitForm()">
</form>
</div>
</body>
</html>

更改选择框angularjs中的数据

4 个答案: