php子级联动删除,angularjs带有添加删除选项二级联动

这次给大家带来angularjs带有添加删除选项二级联动，angularjs带有添加删除选项二级联动的注意事项有哪些，下面就是实战案例，一起来看一下。

www.jb51.net 省市二级联动

*{

margin:0;

padding:0;

}

.ul{

list-style:none;

display:inline-block;

}

.selectOption ul li{

display:inline-block;

width:50px;

padding:5px;

}

ul li:hover{

background-color:#59C0F3;

color:#fff;

cursor:pointer;

}

.container{

display:inline-block;

}

dl{

display: inline-block;

}

dl dt{

display: inline-block;

}

.container{

position:relative;

text-align: left;

vertical-align:top;

}

.selectBoder{

width:150px;

height:20px;

margin:0 auto;

margin-bottom:5px;

cursor:pointer;

border:1px solid #808080;

padding:2px 5px;

font-size:14px;

}

.selectBoder:hover{

border-color:#59C0F3;

}

.selectOption:before{

width: 0;

height: 0;

border-bottom: 50px solid #ffffff;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

.selectOption{

font-size:14px;

position:absolute;

background-color: #ffffff;

z-index:9999;

border:1px solid #eee;

width:360px;

padding:3px 5px;

box-shadow: 5px 5px 10px #888888;

}

.button{

width:30px;

height:30px;

display: inline-block;

background-color:#59C0F3;

text-align:center;

line-height: 25px;

cursor:pointer;

font-size:24px;

color:#fff;

margin:0 5px;

border-radius:30px;

}

.button:hover{

background-color:#12bb16;

}

{{option.province}}

• {{x.name}}

{{option.city}}

• {{y.name}}

+

-

var app = angular.module('myApp',[]);

app.controller('myControl',function($scope){

$scope.ifShowCity = false;

$scope.ifShowProvince = false;

$scope.options =[{index:"0",ifShowCity:false,ifShowProvince:false,province:"",city:"",cities:""}];

$scope.leaveProvince = function(option){

$.each($scope.options,function(index,item){

if(option == $scope.options[index]){

$scope.optionIndex = index;

}

})

$scope.options[$scope.optionIndex].ifShowProvince = false;

}

$scope.leaveCity = function(option){

$.each($scope.options,function(index,item){

if(option == $scope.options[index]){

$scope.optionIndex = index;

}

})

$scope.options[$scope.optionIndex].ifShowCity = false;

}

$scope.choseProvince = function(target,option){

$.each($scope.options,function(index,item){

if(option == $scope.options[index]){

$scope.optionIndex = index;

}

})

$scope.options[$scope.optionIndex].ifShowProvince = false;

$scope.options[$scope.optionIndex].province = target.getAttribute("data-name");

$.each($scope.province,function(index,item){

if(item.value == target.getAttribute("value")){

$scope.options[$scope.optionIndex].cities = item.children;

}

}

)

}

$scope.choseCity = function(target,option){

$.each($scope.options,function(index,item){

if(option == $scope.options[index]){

$scope.optionIndex = index;

}

})

$scope.options[$scope.optionIndex].ifShowCity = false;

$scope.options[$scope.optionIndex].city = target.getAttribute("data-name");

}

function getPrarms(){

return $scope.options;

}

$scope.sub = function(){

getPrarms();

}

$scope.province =

[{

name: "湖北省",

value: "01",

children: [{

name: "武汉",

value: "0101"

}, {

name: "黄冈",

value: "0102"

}, {

name: "荆州",

value: "0103"

}, {

name: "十堰",

value: "0104"

}, {

name: "黄石",

value: "0105"

}, {

name: "鄂州",

value: "0106"

}, {

name: "咸宁市",

value: "0107"

}, {

name: "襄阳市",

value: "0108"

}

]

},{

name: "广东省",

value: "02",

children: [{

name: "广东",

value: "0201"

}, {

name: "深圳",

value: "0202"

}, {

name: "佛山",

value: "0203"

}, {

name: "惠州",

value: "0204"

}, {

name: "东莞",

value: "0205"

}]

},{

name: "河北省",

value: "03",

children: [{

name: "北京",

value: "0301"

}, {

name: "邯郸",

value: "0302"

}, {

name: "邢台",

value: "0303"

}, {

name: "保定",

value: "0304"

}, {

name: "秦皇岛",

value: "0305"

}

]}

]

$scope.choseP = function($index){

$scope.options[$index].ifShowProvince = !$scope.options[$index].ifShowProvince;

$scope.options[$index].ifShowCity = false;

}

$scope.choseC = function($index){

$scope.options[$index].ifShowCity = !$scope.options[$index].ifShowCity;

$scope.options[$index].ifShowProvince = false;

}

$scope.addChose = function($index){

if($scope.options.length < 10){

$scope.options.splice($scope.options.length,0,{ //从最后面添加内容

index:$scope.options.length,ifShowCity:false,ifShowProvince:false

});

$scope.canDelete = true;

}else{

$scope.canAdd = false;

}

}

$scope.deleteChose = function($index){

if($scope.options.length >1){

$scope.options.splice($index,1); //从当前行删除。

}

if($index == 1){

$scope.canDelete = false;

}

}

});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：