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

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

   *{  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 1){    $scope.options.splice($index,1); //从当前行删除。   }   if($index == 1){    $scope.canDelete = false;   }  } });

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

table固定表头使表单横向滚动

Bootstrap下拉插件dropdown使用技巧

以上就是angularjs带有添加删除选项二级联动的详细内容，更多请关注【创想鸟】其它相关文章！