Question

我想更新有关国家选择的州名单。我已经研究了一下这里建议使用$ parent作为ng-if如果不能在控制器范围内工作。但这对我来说也不起作用。有人可以帮我理解如何将值输入状态选择控件。另外我还想知道如果我的HTML中有多个ng-if会怎么样。（再次嵌套$ parent。$ parent。$ parent ...不工作） Plunker Link：Plunker Link “严格使用”; var app = angular.module（“app”，[]）; function CountriesController（$ scope）{ $ scope.condition = true; $ scope.countries = [{ “名字”：“美国”， “id”：1 }，{ “名字”：“加拿大”， “id”：2 }]; $ scope.states = [{ “名字”：“阿拉巴马州”， “id”：1， “countryId”：1 }，{ “名字”：“阿拉斯加”， “id”：2， “countryId”：1 }，{ “名字”：“亚利桑那州”， “id”：3， “countryId”：1 }，{ “名字”：“艾伯塔省”， “id”：4， “countryId”：2 }，{ “名字”：“英国哥伦比亚”， “id”：5， “countryId”：2 }]; $ scope.updateCountry = function（）{ $ scope.availableStates = []; angular.forEach（$ scope.states，function（value）{ if（value.countryId == $ scope.country.id）{ $ scope.availableStates.push（值）; } }）; } } ＆lt;！DOCTYPE html＆gt; ＆lt; html data-ng-app =“app”＆gt; ＆LT; HEAD＆GT; ＆lt; 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“＆GT;＆LT; /脚本＆GT; ＆lt; link rel =“stylesheet”href =“style.css”/＆gt; ＆lt; script src =“script.js”＆gt;＆lt; / script＆gt; ＆LT; /头＆GT; ＆lt; body data-ng-controller =“CountriesController”＆gt; ＆lt; div ng-if =“condition”＆gt; ＆lt; select data-ng-model =“country”data-ng-options =“country.name for country in countries”data-ng-change =“updateCountry（）”＆gt; ＆lt; option value =“”＆gt;选择国家＆lt; /选项＆gt; ＆LT; /选择＆GT; ＆LT峰; br＆GT; ＆lt; select data-ng-model =“state”data-ng-options =“state.name for stateStates”＆gt; ＆lt; option value =“”＆gt;选择州＆lt; /选项＆gt; ＆LT; /选择＆GT; ＆LT峰; br＆GT;国家：{{country}} ＆LT峰; br＆GT;州：{{state}} ＆LT; / DIV＆GT; ＆LT; /体＆GT; ＆LT; / HTML＆GT;

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

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

对于加载的数据表单，只使用init加载的模型数据，如下所示：

<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值应该是字符串。所以他们需要用双引号连接。

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

2 个答案: