我想在国家/地区包含州时显示下拉列表，如果国家/地区不包含州，则显示输入字段。我在这里添加了一些代码，但我不知道为什么他们似乎没有工作。当我点击包含州的国家时，下拉列表将在第一次工作，同样适用于州输入字段（刷新后，而不是在我点击包含州的国家/地区后）。包含国家的国家是印度和加拿大。
这是我的部分视图代码：
<div ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="MyApp">
<md-input-container class="md-block" flex-gt-sm >
<label>Country</label>
<md-select name="countryDropdown1" ng-model="candidateData.PermanentAddress.Country" ng-required="true">
<md-option ng-repeat="country in countrylist" value="{{country.country}}" ng-click="getCountryStates(country.id)" >
{{country.country}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" ng-show="stateInput">
<label>State</label>
<input required name="stateInput" ng-model="candidateData.PermanentAddress.State" ng-required="true"/>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm ng-show="States" >
<label>State</label>
<md-select name="stateDropdown1" ng-model="candidateData.PermanentAddress.State"ng-required="true" >
<md-option ng-repeat="state in states" value="{{state.state}}">
{{state.state}}
</md-option>
</md-select>
</md-input-container>
</div>
这是我的角度控制器： 角
.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('DemoCtrl', function($scope, $filter) {
$scope.getCountry = function () {
return countrylist;
};
$scope.getCountryStates = function (countryId) {
$scope.states = ($filter('filter')($scope.statelist, { countryId: countryId }));
$scope.showStates(countryId);
};
$scope.States = false;
$scope.stateInput = false;
//$scope.showStates = function (countryId) {
// for (var i = 0; i < $scope.statelist.length; i++) {
// if ($scope.statelist[i].countryId == countryId) {
// $scope.States = true;
// return false;
// }
// }
// $scope.States = false;
// $scope.stateInput = true;
// return false;
//}
$scope.showStates = function (countryId) {
for (var i = 0; i < $scope.statelist.length; i++) {
if ($scope.statelist[i].countryId == countryId) {
$scope.States = true;
return false;
}
//else {
// $scope.States = false;
// $scope.stateInput = true;
// return false;
//}
}
$scope.States = false;
$scope.stateInput = true;
return false;
}
$scope.statelist = [{ "Id": 4, "state": "New Brunswick", "countryId": 2 },
{ "Id": 5, "state": "Manitoba", "countryId": 2 },
{ "Id": 6, "state": "Delhi", "countryId": 3 },
{ "Id": 7, "state": "Bombay", "countryId": 3 },
{ "Id": 8, "state": "Calcutta", "countryId": 3 },
{ "Id": 9, "state": "Johor", "countryId": 145 },
{ "Id": 10, "state": "Kedah", "countryId": 145 },
{ "Id": 11, "state": "Kelantan", "countryId": 145 },
{ "Id": 12, "state": "Labuan", "countryId": 145 },
{ "Id": 13, "state": "Melaka", "countryId": 145 },
{ "Id": 14, "state": "Negeri Sembilan", "countryId": 145 },
{ "Id": 15, "state": "Pahang", "countryId": 145 },
{ "Id": 16, "state": "Perak", "countryId": 145 },
{ "Id": 17, "state": "Perlis", "countryId": 145 },
{ "Id": 18, "state": "Pulau Pinang", "countryId": 145 },
{ "Id": 19, "state": "Sabah", "countryId": 145 },
{ "Id": 20, "state": "Sarawak", "countryId": 145 },
{ "Id": 21, "state": "Selangor", "countryId": 145 },
{ "Id": 22, "state": "Terengganu", "countryId": 145 },
{ "Id": 23, "state": "Wilayah Persekutuan", "countryId": 145 }]
$scope.countrylist = [
{ "id": 1, "country": "USA" },
{ "id": 2, "country": "Canada" },
{ "id": 3, "country": "India" },
{ "id": 4, "country": "Malaysia" },];
});
这是我的代码链接：
答案 0 :(得分：0)
我只是通过这样做改变你的代码：
$scope.getCountryStates = function(countryId) {
$scope.states = ($filter('filter')($scope.statelist, function(s) {
return s.countryId === countryId;
}));
$scope.candidateData.PermanentAddress.State = null;
$scope.hasStates = $scope.states && $scope.states.length > 0;
};
然后我更改了html来处理hasStates标志：
<md-input-container class="md-block" flex-gt-sm ng-show="hasStates" >
和
<md-input-container class="md-block" ng-show="!hasStates">
您的过滤器可能会在countryId中获得包含1,2,3或4的所有州（即countryId 145在ID为4的美国国家/地区）
您的更新代码：http://codepen.io/diegopolido/pen/MyXOEp?editors=1010
答案 1 :(得分：0)
HTML：使用 ng-change
<md-select name="countryDropdown1" ng-model="candidateData.PermanentAddress.Country" ng-required="true">
<md-option ng-repeat="country in countrylist" value="{{country.country}}" ng-change="getCountryStates(country.id)" >
{{country.country}}
</md-option>
</md-select>
JS：
$scope.getCountryStates = function (countryId) {
$scope.states = ($filter('filter')($scope.statelist, { countryId: countryId }));
if ($scope.states.length >0)
$scope.stateInput = true;
else
$scope.showStates(countryId);
};
答案 2 :(得分：0)
试试这个。
查看文件：
您只需使用3个单独的状态即可显示适当的结果。
HEAD http://localhost:9200/zzz?pretty=true
Status: 200
------------------------------
DELETE http://localhost:9200/zzz?pretty=true
Status: 200
{
"acknowledged" : true
}
------------------------------
PUT http://localhost:9200/zzz?pretty=true
{}
Status: 200
{
"acknowledged" : true
}
------------------------------
PUT http://localhost:9200/zzz/omg/1?pretty=true&refresh=true
{
"id": 1,
"answer": "The quick brown fox jumps over the lazy dog"
}
Status: 201
{
"_index" : "zzz",
"_type" : "omg",
"_id" : "1",
"_version" : 1,
"_shards" : {
"total" : 2,
"successful" : 1,
"failed" : 0
},
"created" : true
}
------------------------------
POST http://localhost:9200/zzz/omg/_search?pretty=true
{
"query": {
"match": {
"answer": {
"type": "phrase",
"query": "brown dog",
"slop": 5
}
}
}
}
Status: 200
{
"took" : 1,
"timed_out" : false,
"_shards" : {
"total" : 5,
"successful" : 5,
"failed" : 0
},
"hits" : {
"total" : 1,
"max_score" : 0.07829509,
"hits" : [ {
"_index" : "zzz",
"_type" : "omg",
"_id" : "1",
"_score" : 0.07829509,
"_source" : {
"id" : 1,
"answer" : "The quick brown fox jumps over the lazy dog"
}
} ]
}
}
------------------------------
0.07829509
JS FIle
<md-input-container class="md-block" ng-show="status.countrySelected && status.stateInput">
//input
</md-input-container>
<md-input-container class="md-block" flex-gt-sm ng-show="status.countrySelected && status.stateSelect">
//input
</md-input-container>
这是完整的工作代码。 http://codepen.io/next1/pen/aNKEq