更新<选择>angularjs 中 ng-if 中的标签 [英] Update &lt;select&gt; tag inside ng-if in angularjs

查看：20
本文介绍了更新<选择>angularjs 中 ng-if 中的标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

另外我也想知道如果我的 HTML 中有多个 ng-if 会怎样.(再次嵌套 $parent.$parent.$parent... 不起作用)

Plunker 链接:Plunker 链接

"use strict";var app = angular.module("app", []);功能国家控制器($范围){$scope.condition = true;$scope.countries = [{"name": "美国",身份证":1},{"name": "加拿大",身份证":2}];$scope.states = [{"name": "阿拉巴马州",身份证":1，国家 ID":1}, {"name": "阿拉斯加",身份证":2，国家 ID":1}, {"name": "亚利桑那州",身份证":3，国家 ID":1}, {"name": "阿尔伯塔",身份证":4，国家 ID":2}, {"name": "不列颠哥伦比亚",身份证":5，国家 ID":2}];$scope.updateCountry = function(){$scope.availableStates = [];angular.forEach($scope.states, function(value){if(value.countryId == $scope.country.id){$scope.availableStates.push(value);}});}}

<html data-ng-app="app"><头><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><body data-ng-controller="CountriesController"><div ng-if="条件"><select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()"><option value="">选择国家</option></选择><br><select data-ng-model="state" data-ng-options="state.name for state in availableStates"><option value="">选择状态</option></选择><br>国家:{{国家}}<br>状态:{{state}}

</html>

解决方案

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

 过滤器:{countryId: $parent.country.id}

"use strict";var app = angular.module("app", []);功能国家控制器($范围){$scope.condition = true;$scope.countries = [{"name": "美国",身份证":1},{"name": "加拿大",身份证":2}];$scope.states = [{"name": "阿拉巴马州",身份证":1，国家 ID":1}, {"name": "阿拉斯加",身份证":2，国家 ID":1}, {"name": "亚利桑那州",身份证":3，国家 ID":1}, {"name": "阿尔伯塔",身份证":4，国家 ID":2}, {"name": "不列颠哥伦比亚省",身份证":5，国家 ID":2}];$scope.updateCountry = function(){$scope.availableStates = [];angular.forEach($scope.states, function(value){if(value.countryId == $scope.country.id){$scope.availableStates.push(value);}});}}

<html data-ng-app="app"><头><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><body data-ng-controller="CountriesController"><div ng-if="条件"><select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change=""><option value="">选择国家</option></选择><br><select data-ng-model="state" data-ng-options="state.name for state in states | filter:{countryId: country.id}:true"><option value="">选择状态</option></选择><br>国家:{{国家}}<br>状态:{{state}}

</html>

I would like to update the list of states on selection of country. I have researched a bit into this where it was recommended to use $parent as ng-if does not work on controller scope.But that too is not working for me.

Can someone please help me understand how to get the values into state select control.

Also I would also like to know what if there are multiple ng-if in my HTML. (again nested $parent.$parent.$parent... is not working)

Plunker Link : 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>

解决方案

Instead of making a separate list, you can use your country list by filtering

 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>

这篇关于更新<选择>angularjs 中 ng-if 中的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆