1. 程式人生 > >python中繫結多條資料時解決雙繫結的資料衝突問題

python中繫結多條資料時解決雙繫結的資料衝突問題

問題描述
問題描述

問題場景:用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>