思路分析:
1.單選或多選這左邊的資料,左邊選擇的資料就移除變動到後面的選擇框中,後面選擇框的功能反過來也是一樣的;
2.看起來這兩個選擇框的功能是一模一樣的,沒錯這裡關鍵的問題就在於這兩個框之前必須保持的關係,因為複雜的業務介面通常有多個選擇框,這樣就必須要知道那兩個框是對應的,這裡使用的是外掛程式id來保持關係
**:功能主要分為兩個方法,選擇左邊資料時候的處理方法和右邊資料的處理方法如下:
1view codevar mytest = angular.module("
mytest
", );
23 mytest.directive("
selremove
", function () ,
12 template: '
' +13
'' +14'
' +15
'' +16'
' +17
'' +18'
' +19
'' +20'
' +21
'' +22'
',23controller: function ($scope) ;
3031
//右移
32 $scope.nextfun =function ()
4243
//新增到最終選中框
44//
console.log("next:" + item01.val);
45$scope.data.selectedalloption.push(item01);
46//
移除opitems資料
47 $scope.data.opitems.splice(ii, 1
);48
break;49
}50}51
}5253//
左移54 $scope.prevfun =function ()
6768
//新增到原始集合
69$scope.data.opitems.push(item);
70//
移除selectedalloption資料
71 $scope.data.selectedalloption.splice(ii, 1
);72
break;73
}74}75
}76}77
}78});79
80 mytest.controller("
opctrl
", function ($scope) ,87,
91,95,
99,103,
107,
111,
115119
];120 });
上面使用的ng指令的規範,就不用說了,必須要按照ng規則來寫指令,想說的是這段**-ng-options="option.name for option in data.opitems track by option.val"使用了ng自帶的資料展示方式,類似於for迴圈遍歷資料;
上面的**是封裝了乙個ng指令,然後在頁面上只需要一句**如: 這樣就能把兩個選擇框展示出來,功能實現;
這功能簡單沒有什麼說的也沒用到什麼nb的技術,關鍵想強調的是ng的規範性,web介面效果實現起來的簡單分析,勿噴。
ng directive 選擇資料
思路分析 1.單選或多選這左邊的資料,左邊選擇的資料就移除變動到後面的選擇框中,後面選擇框的功能反過來也是一樣的 2.看起來這兩個選擇框的功能是一模一樣的,沒錯這裡關鍵的問題就在於這兩個框之前必須保持的關係,因為複雜的業務介面通常有多個選擇框,這樣就必須要知道那兩個框是對應的,這裡使用的是外掛程式i...
Pandas 選擇資料
pandas 具有非常豐富的資料篩選能力,可以支援多種個性化的篩選 dates pd.date range 20210125 periods 6 df pd.dataframe np.arange 24 reshape 6,4 index dates,columns a b c d print df...
pandas資料選擇(索引)
import pandas as pd import numpy as npdates pd.date range 20180101 periods 6 df pd.dataframe np.arange 24 reshape 6,4 index dates,columns a b c d prin...