angularjs 态添加信息的三级联动

@angularjs

angularjs-动态添加信息的三级联动：

实现效果:

1.动态添加

只需要在点击事件中添加:

	$scope.demoList.push({});

相对的删除只需要移除就行了:

	$scope.demoList.splice(index, 1);

2.三级联动

需要在父级的change事件中传入该条信息整个的对象:

$scope.lv1Change = function (id, data) {
        data.lv2List = [];
        angular.forEach($scope.lv1list, function (lv1) {
            if (lv1.id == id) {
                data.lv2List = lv1.children;
            }
        })
    }

传入信息对象的目的就是为了使每一条信息的三级联动都各自独立, 否则按以往的直接进行三级联动会使不同信息之间的三级联动相互干扰.

页面用:ng-options

3.意外发现的一个三级联动的方式 :

用ng-repeat 和 ng-if
联动列表:

	dataList = [
	{
		id:1
		name:名称
		parentId:父id
	},
	... ...
	]

前端代码:

<select class="form-control" ng-model="lv1Data">
    <option value="">一级分类</option>
    <option  ng-repeat="lv1 in dataList" ng-if="lv1.parentId == 0"
             value="{{lv1.id}}">{{lv1.name}}</option>
</select>
<select class="form-control" ng-model="lv2Data">
   <option value="">二级分类</option>
   <option  ng-repeat="lv2 in dataList" ng-if="lv2.parentId == lv1Data"
            value="{{lv2.id}}">{{lv2.name}}</option>
</select>
<select class="form-control" ng-model="lv3Data">
   <option value="">三级分类</option>
   <option  ng-repeat="lv3 in dataList" ng-if="lv3.parentId == lv2Data"
            value="{{lv3.id}}">{{lv3.name}}</option>
</select>

优点 : 不用写js
缺点 : 在父级切换的时候会使子级选项变空白(除非子级没选过使默认的值,即:某级分类)