一、数组结构的数据,前端处理成叶子节点数据
比如说项目中遇到的一级类目,二级类目,三级类目
只有选择一级类目之后,才可以选择二级类目,选择了二级类目,才可以选择三级类目。当上一级类目选择变了,他下面的各级类目会被清空,没有选择中。
1、模板文件
一、数组结构的数据,前端处理成叶子节点数据
比如说项目中遇到的一级类目,二级类目,三级类目
只有选择一级类目之后,才可以选择二级类目,选择了二级类目,才可以选择三级类目。当上一级类目选择变了,他下面的各级类目会被清空,没有选择中。
1、模板文件
2、控制器
//选择一级类目与二级类目联动$scope.$watch("selectedLevel1Category",function () { $scope.level2Categories = []; $scope.selectedLevel2Category = null; if ($scope.selectedLevel1Category) { for (var i = 0; i < categories.length; i++) { if (categories[i].parentCategoryCode == $scope.selectedLevel1Category.categoryCode) { $scope.level2Categories.push(categories[i]); } } }});//选择二级类目与三级类目联动$scope.$watch("selectedLevel2Category",function () { $scope.level3Categories = []; $scope.selectedLevel3Category = null; if ($scope.selectedLevel2Category) { for (var i = 0; i < categories.length; i++) { if (categories[i].parentCategoryCode == $scope.selectedLevel2Category.categoryCode) { $scope.level3Categories.push(categories[i]); } } }});
PS:使用的watch监听是否被选中。
for (var i = 0; i < categories.length; i++) {
if (categories[i].categoryLayer == "1") {
$scope.level1Categories.push(categories[i]);
}
}
// 为更改为二级目录暂加
// $scope.selectedLevel1Category = $scope.level1Categories[0];
$scope.level2Categories = [];
$scope.selectedLevel2Category = null;
if ($scope.selectedLevel1Category) {
for (var i = 0; i < categories.length; i++) {
if (categories[i].parentCategoryCode == $scope.selectedLevel1Category.categoryCode) {
$scope.level2Categories.push(categories[i]);
}
}
}
});</pre>
PS:一级类目与二级类目,二级类目与三级类目包裹成一个叶子树。
选中的一个是对象不是一个值。
二、数组结构的数据,前端处理成叶子节点数据(省份与城市的联动)
后端请求数据
模板文件
<div class="col-xs-4"
ng-class="{true:'has-error'}[(applyForm.licenseAddress.$dirty||needSubmit) && applyForm.licenseAddress.$invalid]">
<input type="text" class="form-control" name="licenseAddress"
ng-model="applyInfo.licenseAddress" required ng-readonly="getDataread" maxlength="50"
ng-maxlength="50" ng-pattern="/^\S*$/" >
</div>
<div class="col-xs-6 col-xs-offset-3">
<p class="form-control-static text-muted">如果找不到所在城市,可以选择所在地区或者上级城市。详细地址不能有空格。</p>
</div>
<#--<div class="col-xs-3" style="float:right;"-->
<#--ng-show="selectedLicenseProvince===null || selectedLicenseCity===null || applyInfo.licenseAddress===''">-->
<#--<span class="text-danger"地址填写不全</span>-->
<#--</div>-->
</div></pre>
控制器js
欢迎访问:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。