更新<select>標籤內ng - 如果在angularjs

我想更新國家選擇國家列表。我已經研究了一點，在這裏推薦使用$ parent作爲ng - 如果在控制器範圍上不起作用，但是這對我不起作用。更新<select>標籤內ng - 如果在angularjs

有人可以幫我理解如何獲得值進入狀態選擇控制。

另外我也想知道如果有多個ng-if在我的HTML中。（再次嵌套$父父$ $父...不工作。）

"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個國家「阿爾伯塔省」和「不列顛哥倫比亞省」，因爲這些都與國家 – Santan

這裏是一個初始化選項，選擇最簡單的方法：

空白表格，只是 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>

我想，init值應該是字符串。所以他們需要用雙引號連接。

來源

2017-01-29 19:39:00

更新<select>標籤內ng - 如果在angularjs

回答

相關問題