我有多个下拉菜单,我想基于下拉菜单中的更改事件显示/隐藏。它是嵌套元素下拉列表。
http://jsfiddle.net/U3pVM/60518/
angular.module('myApp', []).controller('CEventCtrl', ['$rootScope', '$scope',
function($rootScope, $scope) {
var $this = this;
$this.bUOptions = '[{"id":"bu_0","options":[{"id":"","name":"Not Selected"},{"id":6,"name":"Bhumi1"},{"id":12,"name":"*Sales*"},{"id":17,"name":"*Support*"}],"label":"Department","showif":null},{"id":"bu_12","options":[{"id":"","name":"Not Selected"},{"id":13,"name":"AU Sales"},{"id":14,"name":"USA Sales"}],"label":"Section","showif":"bu_0=12"},{"id":"bu_14","options":[{"id":"","name":"Not Selected"},{"id":16,"name":"USA East Sales"},{"id":15,"name":"USA West Sales"}],"label":"Region","showif":"bu_12=14&&bu_0=12"},{"id":"bu_17","options":[{"id":"","name":"Not Selected"},{"id":18,"name":"AU Support"},{"id":19,"name":"UK Support"}],"label":"Section","showif":"bu_0=17"}]';
$scope.bUn = {};
this.count = 0;
this.isBUChildElement = function(value, key) {
this.bU = {};
bU = $this.bUOptions;console.log(bU);
if (value !== '' & typeof bU[key] == 'undefined') {
if (!$scope.bUn[key]) {
$scope.bUn[key] = false;
}
}
else {
$scope.bUn[key] = true;
};
return $scope.bUn[key];
}
this.getBUChild = function(selectedValue, showif,selectedElement){
var splitKey = selectedElement.split('_')[0];
angular.forEach(bUn, function(value, key){
if(splitKey+'_'+selectedValue !== key){
bUn[key] = false;
}
bUn[splitKey+'_'+selectedValue] = true;
});
if (showif !=='') {
if (showif.indexOf("&&") === -1) {
var splitShowif = showif.split('=');
console.log('');
console.log(splitKey+'_'+splitShowif[1]);
bUn[splitKey+'_'+splitShowif[1]] = true;
}
else {
var splitShowif = showif.split('&&');
angular.forEach(splitShowif, function(value, key) {
var splitShowifParts = value.split('=');
console.log('');
console.log(splitKey+'_'+splitShowifParts[1]);
bUn[splitKey+'_'+splitShowifParts[1]] = true;
});
}
}
bUn[selectedElement] = true;
}
}
]);
但是不知何故它多次调用并且无法正确隐藏。