Изменить данные в selectboxes angularjs

У меня есть 3 разных selectboxes на моей странице. Если я выбрал опцию В первом selectbox я хочу, чтобы опции Во втором selectbox изменились на параметры, которые принадлежат к значению, выбранному вами в первом selectbox.Изменить данные в selectboxes angularjs

Я хочу то же самое с третьим selectbox. Если я выбрал опцию второй selectbox, я хочу, чтобы параметры в третьем selectbox изменились на значения, принадлежащие значению во втором.

Любые предложения, как сделать это как можно проще в AngularJS?

источник

2015-04-14 user500468

вы можете сделать это с помощью комбинации 'нг-repeat' с фильтрами –

@pankajparkar: Любой пример кода? – user500468

Возможно, это повторяющийся вопрос: http://stackoverflow.com/questions/18723399/cascading-select-dropdowns и http://stackoverflow.com/questions/18082609/angularjs-populating-dependent-combobox – nerezo

Вы могли бы добиться этого с помощью 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'] 
     } 
    }; 
    })

Markup

<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

источник

2015-04-14 07:33:45

Hii @pankajparkar ... Знаете ли вы, что угловатые хорошо .. У меня есть небольшое сомнение в angularjs .. не могли бы вы помочь мне .. – phpfresher

@phpfresher да, вы можете спросить –

Спасибо ... Я делаю код стран, штатов и городов, используя angularjs ... Все работает нормально, но я хочу, когда нет записей для выбранной «страны» в БД, текстовое поле должно отображаться вместо «состояний» и «города» вместо выборок. Не понятно, как это сделать. Не могли бы вы дать мне предложение о том, как это сделать. – phpfresher

Просто используйте директиву ng-change и вызовите функцию с вашего контроллера, чтобы выполнить любую логику, которую вы хотите.

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

источник

2015-04-14 07:23:17 saygon91

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

Надеясь, что это поможет вам

источник

2015-04-14 07:26:09 Reena

Здесь я разместить код страны, штатов и городов ... Так же, как то же самое, что вы хотели ...

Просто создайте 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>

источник

2015-04-14 07:26:26 phpfresher

Изменить данные в selectboxes angularjs

ответ

Смежные вопросы