更改选择框中的数据angularjs

wyyhbhjk 于 2022-10-31 发布在 Angular

关注(0)|答案(4)|浏览(125)

我的页面上有3个不同的选择框。如果我在第一个选择框中选择了一个选项，我希望第二个选择框中的选项更改为属于您在第一个选择框中选择的值的选项。
我希望第三个选择框也是这样。如果我在第二个选择框中选择了一个选项，我希望第三个选择框中的选项更改为属于第二个选择框中的值的选项。
有什么建议如何在AngularJS中尽可能简单地做到这一点吗？

angularjs

来源：https://stackoverflow.com/questions/29621260/change-data-in-selectboxes-angularjs

4条答案

按热度按时间

pexxcrt21#

您可以通过使用带Angular 滤光片的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

赞(0）回复(0）举报 2022-10-31

5jdjgkvh2#

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

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

赞(0）回复(0）举报 2022-10-31

nafvub8i3#

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

希望能对你有所帮助

赞(0）回复(0）举报 2022-10-31

omhiaaxx4#

这里我张贴的国家，州和城市的代码...就像你想要的一样...
只需创建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>

赞(0）回复(0）举报 2022-10-31

我来回答

更改选择框中的数据angularjs

4条答案

相关问题

热门标签

最新问答