<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
select{width:150px}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul style="list-style: none;">
<li ng-repeat="list in tablelist" sub-tem>
{{roleValue[ $index ]}}
<select ng-change="typeChange($index,typeValue[ $index ])" ng-value="typeValue[ $index ]" ng-model="typeValue[ $index ]" ng-options="value.id as value.name for value in typeOptions"></select>
<select ng-change="roleChange($index,roleValue[ $index ])" ng-value="roleValue[ $index ]" ng-model="roleValue[ $index ]" ng-options="value.id as value.name for value in roleOptions[ $index ]"></select>
<select ng-change="ownerChange($index,ownerValue[ $index ])" ng-value="ownerValue[ $index ]" ng-model="ownerValue[ $index ]" ng-options="value.id as value.name for value in ownerOptions[ $index ]"></select>
</li>
</ul>
<a href="#" ng-click="getVal()">ddd</a>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("myCtrl", ["$scope", function( $scope ){
$scope.typeValue = [];
$scope.roleValue = [];
$scope.ownerValue = [];
$scope.typeOptions =[{id:1,name:"sunny1"},{id:2,name:"sunny2"},{id:3,name:"sunny3"},{id:4,name:"sunny4"}];
$scope.roleOptions =[];
$scope.ownerOptions =[];
$scope.tablelist = [
{name : "book1", value : 1,role:1,owner:1},
{name : "book2", value : 2,role:2,owner:2},
{name : "book3", value : 3,role:3,owner:3},
{name : "book3", value : 4,role:4,owner:4}
];
angular.forEach($scope.tablelist , function(data,index,array){
$scope.typeValue.push(data.value);//type 选中值
$scope.roleValue.push(data.role);//role 选中值
$scope.ownerValue.push(data.owner);//role 选中值
var roleopt=[{id:0,name:data.value+"role"},{id:index+1,name:data.value+"role"}]//假设后台返回数据
$scope.roleOptions.push(roleopt)//role 的option
var owneropt=[{id:0,name:data.value+"owner"},{id:index+1,name:data.value+"owner"}]//假设后台返回数据
$scope.ownerOptions.push(owneropt)//owner 的option
});
$scope.typeChange=function(index,val){
var hasRole=1;
console.log($scope.roleValue[index])
$scope.roleOptions[index]=[{id:-1,name:"-"},{id:2,name:index+1+"changerole"},{id:3,name:index+1+"changerole"},{id:4,name:index+1+"changerole"}]
angular.forEach($scope.roleOptions[index], function(data,index,array){
console.log(data.id)
if(data.id!=$scope.roleValue[index]){
hasRole=-1
}
})
if(hasRole==-1){
$scope.roleValue[index]=-1
}
}
$scope.roleChange=function(index,val){
$scope.ownerOptions[index]=[{id:-1,name:"-"},{id:2,name:index+1+"changerole"},{id:3,name:index+1+"changerole"},{id:4,name:index+1+"changerole"}]
}
$scope.getVal=function(){
var commObj={}
angular.forEach($scope.tablelist , function(data,index,array){
});
}
}]);
app.directive("subTem", function() {
return {
link:function($scope,elm,attr){
}
};
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
select{width:150px}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul style="list-style: none;">
<li ng-repeat="list in tablelist" sub-tem>
{{parName[list[6]]}} {{name[ $index ]}}
<select ng-change="typeChange($index,typeValue[ $index ])" ng-value="typeValue[ $index ]" ng-model="typeValue[ $index ]" ng-options="value.id as value.name for value in typeOptions"></select>
<select ng-change="roleChange($index,roleValue[ $index ])" ng-value="roleValue[ $index ]" ng-model="roleValue[ $index ]" ng-options="value.id as value.name for value in roleOptions[ $index ]"></select>
<select ng-change="ownerChange($index,ownerValue[ $index ])" ng-value="ownerValue[ $index ]" ng-model="ownerValue[ $index ]" ng-options="value.id as value.name for value in ownerOptions[ $index ]"></select>
</li>
</ul>
<a href="#" ng-click="getVal()">ddd</a>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("myCtrl", ["$scope", function( $scope ){
$scope.typeValue = [];
$scope.roleValue = [];
$scope.ownerValue = [];
$scope.typeOptions =[{id:-1,name:"-"},{id:1,name:"sunny1"},{id:2,name:"sunny2"},{id:3,name:"sunny3"},{id:4,name:"sunny4"}];
$scope.roleOptions =[];
$scope.ownerOptions =[];
$scope.parName={};
$scope.name=[];
$scope.defindname="defind name"
$scope.tablelist = [
["book1", 1,1,1,1,1,1],//0 name,1 value,2 type,3 role ,4 owner,5 tem,6 parid
["book2", 2,2,2,2,2,3],
["book3", 3,3,3,3,3,2],
["book4", 4,4,4,4,4,4],
];
angular.forEach($scope.tablelist , function(data,index,array){
$scope.parName[data[5]]=$scope.defindname+" "+data[0];//tem做为key name 作为值;然后页面上通过pari获取key的值
$scope.name.push(data[0]);
$scope.typeValue.push(data[1]);//type 选中值
$scope.roleValue.push(data[3]);//role 选中值
$scope.ownerValue.push(data[4]);//role 选中值
var roleopt=[{id:0,name:data[1]+"role"},{id:index+1,name:data[1]+"role"}]//假设后台返回数据
$scope.roleOptions.push(roleopt)//role 的option
var owneropt=[{id:0,name:data[1]+"owner"},{id:index+1,name:data[1]+"owner"}]//假设后台返回数据
$scope.ownerOptions.push(owneropt)//owner 的option
});
console.log($scope.parName)
$scope.typeChange=function(index,val){
var hasRole=-1;
var roleVal=$scope.roleValue[index]
$scope.roleOptions[index]=[{id:-1,name:"-"},{id:2,name:index+1+"changerole"},{id:3,name:index+1+"changerole"},{id:4,name:index+1+"changerole"}]
angular.forEach($scope.roleOptions[index], function(data,index,array){
if(data.id==roleVal){
hasRole=1
}
})
if(hasRole==-1){
$scope.typeValue[index]=-1
$scope.roleValue[index]=-1
$scope.ownerValue[index]=-1
$scope.roleChange(index,-1)
}
}
$scope.roleChange=function(index,val){
$scope.ownerOptions[index]=[{id:-1,name:"-"},{id:2,name:index+1+"changerole"},{id:3,name:index+1+"changerole"},{id:4,name:index+1+"changerole"}]
}
$scope.getVal=function(){
var commObj={}
angular.forEach($scope.tablelist , function(data,index,array){
});
}
}]);
app.directive("subTem", function() {
return {
link:function($scope,elm,attr){
}
};
});
</script>
</body>
</html>参考