在angularjs中更新ng-if中的<select>标签答案

【问题标题】：Update <select> tag inside ng-if in angularjs在angularjs中更新ng-if中的<select>标签
【发布时间】：2015-09-29 08:23:13
【问题描述】：

我想更新选择国家/地区的州列表。我对此进行了一些研究，建议使用 $parent 作为 ng-if 在控制器范围内不起作用。但这对我也不起作用。

有人可以帮我了解如何将值放入状态选择控件中。

我还想知道如果我的 HTML 中有多个 ng-if 怎么办。（再次嵌套 $parent.$parent.$parent... 不起作用）

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="angular.js@1.1.5" 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

【解决方案1】：

您可以通过过滤使用您的国家/地区列表，而不是制作单独的列表

 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="angular.js@1.1.5" 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>

【讨论】：

asdf_enel_hak ：谢谢，但国家没有更新国家/地区的变化
我的意思是对于加拿大国家，它应该在下拉列表“阿尔伯塔”和“不列颠哥伦比亚”中显示 2 个州，因为它们与加拿大相关

【解决方案2】：

这是初始化所选选项的最简单方法：

对于空白表单，只需 init 带有您想要的选项值（不要忘记双单引号）

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

我认为，初始值应该是字符串。所以他们需要用双单引号连接。

【讨论】：