python中繫結多條資料時解決雙繫結的資料衝突問題
阿新 • • 發佈:2018-12-21
問題場景:用angularJS開發的時候有一個指令是$scope。作用是js控制器和html前端顯示之間的資料繫結。如圖所示,首先通過後臺返回資料,得到一個length為2的list,通過選擇對應的openstack賬號資訊,通過ng-change選擇對應賬號,請求得到可用域、專案、安全組等後臺資料,返回的的資料同樣繫結在相同一個$scope的list中。
為了避免選擇第一條資料時,第二條資料發生衝突(每條資料繫結都是親求相同的函式 相同的$scope).在controllersc控制器中做出修改如下: (原來則沒有js檔案中的e.字首以及html文中中的i.字首)
$scope.apply_obj = {} $scope.vm_list = {} $scope.show_account_list = []; $scope.account_info = function () { userService.get_account_list({},{},function (res) { $scope.show_account_list = res.data }); }; $scope.account_info(); $scope.searchTask = function () { loading.open() applicationService.get_order_list({order_num: order_num},{},function (res) { $scope.apply_obj= res.data; }) applicationService.get_task_list({order_num: order_num},{},function (res) { loading.close() $scope.vm_list = res.data; for(var i=0;i<$scope.vm_list.length;i++){ $scope.change_openStack($scope.vm_list[i]); } }) }; $scope.searchTask(); $scope.change_openStack = function(e){ userService.get_images_list({},{"account_id": e.openstack_id},function (res) { e.show_images_list = res.data }); userService.get_zone_list({},{"account_id": e.openstack_id},function (res) { e.show_zone_list = res.data }); userService.get_instance_type_list({},{"account_id": e.openstack_id},function (res){ e.show_instance_type_list = res.data }); userService.get_security_list({},{"account_id": e.openstack_id},function (res){ e.show_security_list = res.data }); userService.get_project_list({},{"account_id": e.openstack_id},function (res){ e.show_project_list = res.data }); userService.get_network_list({},{"account_id": e.openstack_id},function (res){ e.show_network_list = res.data }); }
前端html如下:
<table style="max-height: 240px;margin-top: 5px;overflow-y: auto;overflow-x: hidden;"> <span style="font-size: large;color: red;;">資訊補全</span> <tr> <td>虛擬機器名</td> <td>openStack賬號</td> <td>可用域</td> <td>專案</td> <td>安全組</td> <td>系統映象</td> <td>例項型別</td> <td>網路</td> <td>IP</td> </tr> <tr ng-repeat="i in vm_list"> <td> <input style="width: 100%" type="text" ng-model="i.vm_name"> </td> <td> <select style="width:100%" ng-options="account.id as account.name for account in show_account_list" ng-model="i.openstack_id" ng-change="change_openStack(i)"></select> </td> <td> <select style="width:100%" ng-options="zone.zone_name as zone.zone_name for zone in i.show_zone_list" ng-model="i.available_zone"></select> <td> <select style="width:100%" ng-options="project.project_id as project.project_name for project in i.show_project_list" ng-model="i.project_name"></select> </td> <td> <select style="width:100%" ng-options="security.security_id as security.security_name for security in i.show_security_list" ng-model="i.security_list"></select> </td> <td> <select style="width:100%" ng-options="images.image_id as images.name for images in i.show_images_list" ng-model="i.images"></select> </td> <td> <select style="width:100%" ng-options="instance_type.flavor_id as instance_type.name for instance_type in i.show_instance_type_list" ng-model="i.instance_type"></select> </td> <td> <select style="width:100%" ng-options="network.network_id as network.name for network in i.show_network_list" ng-model="i.network"></select> </td> <td> <input input-hint="例:255.255.255.0" style="width:100%" type="text" ng-model="i.ip_addr" /> </td> </tr> </table>