ng-change 不工作 angularjs
[英]ng-change not working angularjs
問題描述
我正在創建一個 Web 應用程序，其中有兩個下拉列表，我想更改下拉列表 1 上的下拉列表 2 的數據更改
<tr>
<td>
state
</td>
<td>
<select ng-change="gcity()" ng-init="state = 'state'" ng-model="state">
<option ng-repeat="o in statefunc" value="state">{{o.state}}</option>
</select>
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<select ng-init="city = 'select'" ng-model="city">
<option ng-repeat="o in city" value="city">{{o.city}}</option>
</select>
</td>
</tr>
這是我的下拉列表，如果我選擇一個特定的州，城市應該按照我的州進行填充
但它不起作用，甚至在控制台中也不顯示任何數據，
然后我嘗試了 ng-click
<tr>
<td>
state
</td>
<td>
<select ng-click="gcity()" ng-init="state='state'" ng-model="state">
<option ng-repeat="o in statefunc" value="state">{{o.state}}</option>
</select>
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<select ng-init="city='select'" ng-model="city">
<option ng-repeat="o in city" value="city">{{o.city}}</option>
</select>
</td>
</tr>
ng-click 工作正常，但我想使用不起作用的 ng-change，知道嗎？
4 個解決方案
解決方案1
1 2016-10-17 09:55:59
我認為你在所有選項中都有相同的價值
value="state"
嘗試
<option ng-repeat="o in statefunc" value="{{o.state}}">{{o.state}}</option>
例子：
解決方案2
0 2016-10-17 09:08:25
在選擇標簽中使用ng-option而不是option 。看看下面的例子。
<select ng-init="state='state'" ng-options='o.state for o in statefunc'
ng-change="gcity()" ng-model="state">
</select>
解決方案3
0 2016-10-17 09:11:11
現在試試這個，我已經為你准備了演示。
function CountryController($scope) { $scope.countries = { 'india': { 'india city 1': [], 'india city 2': [], 'india city 3': [], 'india city 4': [], }, 'Us': { 'Us city 1': [], 'Us city 2': [], 'Us city 3': [], 'Us city 4': [] }, 'Australia': { 'Australia city 1': [], 'Australia city 2': [], 'Australia city 3': [], 'Australia city 4': [] } }; }
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <div ng-app="" class="container"> <div ng-controller="CountryController"> <div class="form-group"> <label class="control-label" for="Country">Estado:</label> <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries"> <option value=''>Select</option> </select> </div> <br> <div class="form-group"> <label class="control-label" for="States">Municípios:</label> <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states"> <option value=''>Select</option> </select> </div> </div> </div>
解決方案4
0 已采納 2016-10-17 11:59:24
我建議使用不同的 json 數組，如下所示。 唯一的區別是 state 是一個 state 對象數組，而不是一個 state 到城市的鍵值對。 when a state is selected the ng-model is state object with name and cities. 您只能提交州名，不能提交城市列表，這可以在提交時完成。 有了這個，兩個選擇都使用 ngOptions 選擇的數組選項。
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = {
"states": [{
"name": "Maharashtra",
"cities": ["Pune", "Mumbai", "Nagpur"]
}, {
"name": "Gujarat",
"cities": ["Surat", "Ahmedabad", "Baroda"]
}, {
"name": "Rajasthan",
"cities": ["Jaipur", "Ajmer", "Jodhpur"]
}]
}
});
HTML
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tr>
<td>
state
</td>
<td>
<select ng-model="state" ng-options="state.name for state in data.states">
<option value=''>Select</option>
</select>
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<select ng-disabled="!state" ng-model="city" ng-options="city for city in state.cities">
<option value=''>Select</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Plunkr： http ://plnkr.co/edit/mtMdbUveeJKMRqmpvHyI?p=preview
加載微調器不適用於Angularjs中的ng-click或ng-change
[英]Loading spinner is not working on ng-click or ng-change in Angularjs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.