当从下拉菜单中选择默认值时,隐藏复选框.[Angular js]
Hide the checkboxes on when default value selected from dropdown.[Angular js ]
一开始效果很好。当我选择国家时,它会过滤国家,但问题是当我选择"—选择国家—"时,它会从列表中显示整个国家。谢谢你的预付。
<form class="form-horizontal" ng-controller="dropdownCtrl">
<label for="country" class="col-sm-2 control-label">Country </label>
<div class="col-sm-7">
<select ng-model="customer.Country"
ng-options="obj.country as obj.country for obj in countries"
ng-change="getCountryStates()"
class="form-control"
ng-required="true"
id="country">
<option value="">-- Choose Country --</option>
</select>
</div>
<div class="col-sm-7">
<div ng-repeat="item in list">
<input type="checkbox" ng-model="item.selected" value="{{item.value}}"/>
<label>{{item.value}}</label>
</div>
这是我的Controller.js
var myApp = angular.module('myApp',[]);
myApp.controller('dropdownCtrl', ['$scope','CustomerService', function($scope, CustomerService) {
$scope.customer ={
Country:'',
state: ''
};
$scope.countries = CustomerService.getCountry();
$scope.getCountryStates = function(){
$scope.list = CustomerService.getCountryState($scope.customer.Country);
}}]);
这是我的Service.js
myApp.factory("CustomerService", ['$filter', function($filter){
var service = {};
var countrylist =
[
{ "id": 1, "country": "USA" },
{ "id": 2, "country": "AUS" },
{ "id": 3, "country": "India" },
];
var list = [
{ "id": 1, "value": "New York", "countryId":'USA'},
{ "id": 2, "value": "LA","countryId":'USA' },
{ "id": 4, "value": "Sydny","countryId":'AUS' },
{ "id": 5, "value": "Victoria","countryId":'AUS' },
{ "id": 7, "value": "Delhi","countryId":'India' },
{ "id": 8, "value": "Mumbai","countryId":'India' },
];
service.getCountry = function(){
return countrylist;
};
service.getCountryState = function(countryId){
var states = ($filter('filter')(list, {countryId: countryId}));
return states;
};
return service;
}]);
$scope.getCountryStates = function(){
$scope.list = CustomerService.getCountryState($scope.customer.Country);
}
//above function can be changed to
$scope.getCountryStates = function(){
if($scope.customer.Country)
$scope.list = CustomerService.getCountryState($scope.customer.Country);
else $scope.list = []
};
相关文章:
- 显示隐藏复选框
- jquery单击隐藏的复选框
- 在jsTree中隐藏复选框
- 如何从django表单库中隐藏复选框,并使用Javascript切换其显示属性
- 基于复选框隐藏/显示表格行
- 使用jQuery切换根据选中的复选框隐藏/显示表单提交按钮 - 如何设置默认关闭的提交按钮
- 如何在 Yii javascript 中使用复选框隐藏或显示文本字段
- 根据选定的复选框隐藏/显示内容
- 如何使用复选框隐藏和显示jquery数据表中的行
- 使用复选框隐藏我的数据时出现问题
- 复选框隐藏,除非选择了下拉值
- 通过复选框隐藏/显示文本区域,这些复选框具有不同部分的相同类
- 动态复选框隐藏动态输入框
- 如何使用自定义复选框隐藏网格列
- 通过复选框隐藏表格
- JQuery数组's和输入复选框+隐藏
- 使用复选框隐藏多个表单字段
- Symfony 2.3如何通过复选框隐藏/显示图像
- 使用复选框隐藏/显示基于类别的谷歌地图标记's
- 使用 JavaScript 确定复选框 + 隐藏字段组合的值