Обновление <select> тег внутри ng-if in angularjs

Я хотел бы обновить список штатов по выбору страны. Я немного исследовал это, когда было рекомендовано использовать $ parent как ng-if, не работает в области контроллера. Но это тоже не работает для меня.Обновление <select> тег внутри ng-if in angularjs

Может кто-то, пожалуйста, помогите мне понять, как получить значения в состоянии управления выбором.

Также я хотел бы знать, что, если в моем HTML есть несколько ng-if. (Опять вложенных $ родительских $ родителя $ родитель ... не работает.).

Plunker Ссылка: Plunker Link

"use strict"; 
 

 
var app = angular.module("app", []); 
 

 
function CountriesController($scope) { 
 
    $scope.condition = true; 
 
    $scope.countries = [{ 
 
     "name": "USA", 
 
     "id": 1 
 
     },{ 
 
     "name": "Canada", 
 
     "id": 2 
 
    }]; 
 
    
 
    $scope.states = [{ 
 
     "name": "Alabama", 
 
     "id": 1, 
 
     "countryId": 1 
 
     }, { 
 
     "name": "Alaska", 
 
     "id": 2, 
 
     "countryId": 1 
 
     }, { 
 
     "name": "Arizona", 
 
     "id": 3, 
 
     "countryId": 1 
 
     }, { 
 
     "name": "Alberta", 
 
     "id": 4, 
 
     "countryId": 2 
 
     }, { 
 
     "name": "British columbia", 
 
     "id": 5, 
 
     "countryId": 2 
 
    }]; 
 
    
 
    $scope.updateCountry = function(){ 
 
     $scope.availableStates = []; 
 
     
 
     angular.forEach($scope.states, function(value){ 
 
     if(value.countryId == $scope.country.id){ 
 
      $scope.availableStates.push(value); 
 
     } 
 
     }); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html data-ng-app="app"> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body data-ng-controller="CountriesController"> 
 
    <div ng-if="condition"> 
 
    <select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()"> 
 
     <option value="">Select country</option> 
 
    </select> 
 
    <br> 
 
    <select data-ng-model="state" data-ng-options="state.name for state in availableStates"> 
 
     <option value="">Select state</option> 
 
    </select> 
 
    <br> Country: {{country}} 
 
    <br> State: {{state}} 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-09-29 Santan

Вместо того, чтобы отдельный список, вы можете использовать список стран по фильтрации

filter: {countryId: $parent.country.id}

"use strict"; 
 

 
var app = angular.module("app", []); 
 

 
function CountriesController($scope) { 
 
    $scope.condition = true; 
 
    $scope.countries = [{ 
 
     "name": "USA", 
 
     "id": 1 
 
     },{ 
 
     "name": "Canada", 
 
     "id": 2 
 
    }]; 
 
    
 
    $scope.states = [{ 
 
     "name": "Alabama", 
 
     "id": 1, 
 
     "countryId": 1 
 
     }, { 
 
     "name": "Alaska", 
 
     "id": 2, 
 
     "countryId": 1 
 
     }, { 
 
     "name": "Arizona", 
 
     "id": 3, 
 
     "countryId": 1 
 
     }, { 
 
     "name": "Alberta", 
 
     "id": 4, 
 
     "countryId": 2 
 
     }, { 
 
     "name": "British columbia", 
 
     "id": 5, 
 
     "countryId": 2 
 
    }]; 
 
    
 
    $scope.updateCountry = function(){ 
 
     $scope.availableStates = []; 
 
     
 
     angular.forEach($scope.states, function(value){ 
 
     if(value.countryId == $scope.country.id){ 
 
      $scope.availableStates.push(value); 
 
     } 
 
     }); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html data-ng-app="app"> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body data-ng-controller="CountriesController"> 
 
    <div ng-if="condition"> 
 
    <select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change=""> 
 
     <option value="">Select country</option> 
 
    </select> 
 
    <br> 
 
    <select data-ng-model="state" data-ng-options="state.name for state in states | filter:{countryId: country.id}:true"> 
 
     <option value="">Select state</option> 
 
    </select> 
 
    <br> Country: {{country}} 
 
    <br> State: {{state}} 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-09-29 08:52:58

asdf_enel_hak: Спасибо, но государство не обновляется при изменении страны – Santan

Состояние обновляется при изменении состояния комбо –

Я имею в виду для кандалы страны, он должен отображать 2 состояния в выпадающем списке «Альберта» и «Британская колумбия», поскольку они связаны с canada – Santan

Вот простейший способ инициализации выбранной опции:

бланка формы, просто инициализации со значением опции, которые вы хотите (не забудьте двойные одиночные кавычки)

<select ng-model="$ctrl.data.userlevel" ng-init="$ctrl.data.userlevel='0'"> 
<option value="0">User</option> 
<option value="1">Admin</option> 
</select>

для загруженной формы данных просто выполните инициализацию с использованием данных загруженных моделей, например, ниже:

<select ng-model="$ctrl.data.userlevel" ng-init="$ctrl.data.userlevel=''+$ctrl.data.userlevel"> 
<option value="0">User</option> 
<option value="1">Admin</option> 
</select>

Я думаю, значение init должно быть строкой. поэтому им нужно контактировать с двойными одинарными кавычками.

источник

2017-01-29 19:39:00

Обновление <select> тег внутри ng-if in angularjs

ответ

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