Обновить тег select внутри ng-if в angularjs

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

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

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

Ссылка на плункер: ссылка на плунжер

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


angularjs angular-ng-if
person Santan Pereira    schedule 29.09.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

 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>

person asdf_enel_hak    schedule 29.09.2015
comment
asdf_enel_hak : Спасибо, но состояние не обновляется при смене страны. - person Santan Pereira; 29.09.2015
comment
Я имею в виду, что для страны Канада в раскрывающемся списке должны отображаться 2 штата Альберта и Британская Колумбия, поскольку они связаны с Канадой. - person Santan Pereira; 29.09.2015

arrow_upward
1
arrow_downward

Вот самый простой способ инициализировать выбранную опцию:

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

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

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

person T-Bee    schedule 29.01.2017