angularjs 依赖下拉选项值
angularjs dependant dropdown option value
我已经使用 angularjs 成功设置了依赖下拉列表,但我有一个小问题:
我需要定义每个选项标签的值,因为它是由 angular 处理器自动设置的。
这是我的 html 代码:
<div ng-controller="CountryCntrl">
<select id="country" ng-model="states" ng-options="country for (country, states) in countries">
<option value=''>Choose</option>
</select>
Departement:
<select id="state" ng-disabled="!states">
<option value="">Choose</option>
<option ng-repeat="state in states" value="{{state.id}}">{{state.dep}}</option>
</select>
</div>
<br/>
<input type="submit" value="go">
这是我的 angularjs 代码:
<script>
var Aplic = angular.module("Aplic", []);
Aplic.controller('CountryCntrl', function($scope){
$scope.countries = {
'Aquitaine': [ {'id':'22', 'dep': "Dordogne"}, { 'id':'31', 'dep' : "Gironde"} ],
'Auvergne': [ {'id' : '3', 'dep' : "Allier"}, {'id' : '15', 'dep' : "Cantal"} ]
};
});
</script>
我再说一遍,我已经成功地为第二个下拉列表中的选项设置了值,但是对于第一个下拉列表,它会自动采用变量国家/地区的名称。
那么我应该如何更改我的代码才能为第一个下拉列表中的每个选项标签指定一个特定值。
为了更好地理解我的想法,请检查每个下拉列表中的值。这是我在 plunker 上的工作片段:
http://embed.plnkr.co/VBdxGDQNOJSHeGVfloo2/preview
任何帮助将不胜感激。
这是我想要做的:
<select id="state" ng-model="cou">
<option value="">Choisir</option>
<option ng-repeat="cou in countries" value="{{cou.id}}">{{cou.name}}</option>
</select>
<select id="state" ng-disabled="!cou">
<option value="">Choisir</option>
<option ng-repeat="state in cou.states" value="{{state.id}}">{{state.dep}}</option>
</select>
但是现在第二个下拉框不起作用,如果你能解决这个问题
这是为您准备的实施示例。这会将值保留在选项标签中。
<div ng-app="Aplic" ng-controller="CountryCntrl">
<select id="country" ng-model="selectedCountry" ng-options="country.id as country.name for country in countries track by country.id">
<option value="">Choose</option>
</select>Departement:
<select id="state"
ng-model="selectedState"
ng-disabled="!selectedCountry"
ng-options="state.id as state.dep for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id">
<option value="">Choose</option>
</select>
<div>selectedCountry id: {{selectedCountry}}</div>
<div>selectedState id: {{selectedState}}</div>
</div>
控制器:
$scope.countries =[
{
'id': '1',
'name': "Aquitaine",
'states': [{
'id': '22',
'dep': "Dordogne"
}, {
'id': '31',
'dep': "Gironde"
}]
},
{
'id': '2',
'name': "Auvergne",
'states': [{
'id': '3',
'dep': "Allier"
}, {
'id': '15',
'dep': "Cantal"
}]
}];
我已经使用 angularjs 成功设置了依赖下拉列表,但我有一个小问题:
我需要定义每个选项标签的值,因为它是由 angular 处理器自动设置的。
这是我的 html 代码:
<div ng-controller="CountryCntrl">
<select id="country" ng-model="states" ng-options="country for (country, states) in countries">
<option value=''>Choose</option>
</select>
Departement:
<select id="state" ng-disabled="!states">
<option value="">Choose</option>
<option ng-repeat="state in states" value="{{state.id}}">{{state.dep}}</option>
</select>
</div>
<br/>
<input type="submit" value="go">
这是我的 angularjs 代码:
<script>
var Aplic = angular.module("Aplic", []);
Aplic.controller('CountryCntrl', function($scope){
$scope.countries = {
'Aquitaine': [ {'id':'22', 'dep': "Dordogne"}, { 'id':'31', 'dep' : "Gironde"} ],
'Auvergne': [ {'id' : '3', 'dep' : "Allier"}, {'id' : '15', 'dep' : "Cantal"} ]
};
});
</script>
我再说一遍,我已经成功地为第二个下拉列表中的选项设置了值,但是对于第一个下拉列表,它会自动采用变量国家/地区的名称。
那么我应该如何更改我的代码才能为第一个下拉列表中的每个选项标签指定一个特定值。
为了更好地理解我的想法,请检查每个下拉列表中的值。这是我在 plunker 上的工作片段:
http://embed.plnkr.co/VBdxGDQNOJSHeGVfloo2/preview
任何帮助将不胜感激。
这是我想要做的:
<select id="state" ng-model="cou">
<option value="">Choisir</option>
<option ng-repeat="cou in countries" value="{{cou.id}}">{{cou.name}}</option>
</select>
<select id="state" ng-disabled="!cou">
<option value="">Choisir</option>
<option ng-repeat="state in cou.states" value="{{state.id}}">{{state.dep}}</option>
</select>
但是现在第二个下拉框不起作用,如果你能解决这个问题
这是为您准备的实施示例。这会将值保留在选项标签中。
<div ng-app="Aplic" ng-controller="CountryCntrl">
<select id="country" ng-model="selectedCountry" ng-options="country.id as country.name for country in countries track by country.id">
<option value="">Choose</option>
</select>Departement:
<select id="state"
ng-model="selectedState"
ng-disabled="!selectedCountry"
ng-options="state.id as state.dep for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id">
<option value="">Choose</option>
</select>
<div>selectedCountry id: {{selectedCountry}}</div>
<div>selectedState id: {{selectedState}}</div>
</div>
控制器:
$scope.countries =[
{
'id': '1',
'name': "Aquitaine",
'states': [{
'id': '22',
'dep': "Dordogne"
}, {
'id': '31',
'dep': "Gironde"
}]
},
{
'id': '2',
'name': "Auvergne",
'states': [{
'id': '3',
'dep': "Allier"
}, {
'id': '15',
'dep': "Cantal"
}]
}];