ng directive 選擇資料

2021-09-08 11:47:21 字數 1830 閱讀 5634

思路分析:

1.單選或多選這左邊的資料,左邊選擇的資料就移除變動到後面的選擇框中,後面選擇框的功能反過來也是一樣的;

2.看起來這兩個選擇框的功能是一模一樣的,沒錯這裡關鍵的問題就在於這兩個框之前必須保持的關係,因為複雜的業務介面通常有多個選擇框,這樣就必須要知道那兩個框是對應的,這裡使用的是外掛程式id來保持關係

**:功能主要分為兩個方法,選擇左邊資料時候的處理方法和右邊資料的處理方法如下:

1

var 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 });

view code

上面使用的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...