angular使用ui-select小結

初識：

首先看看ui-select的結構：

<ui-select ng-model="demoChoose" theme="bootstrap" ng-change="changeDemoChooseList()">
            <ui-select-match>
                <span>{{$item}}</span>
            </ui-select-match>
            <ui-select-choices repeat="c in demoList">
                <div ng-bind-html="c | highlight: $select.search"></div>
            </ui-select-choices>
        </ui-select>

然後看一下樣式：

	//js裏面的簡單賦值
	$scope.demoList=['123','456','789','101112']
    $scope.demoChoose=[]

那我們可以很明顯的知道：
1.ui-select-match 代表選中以及輸入區域
1）{{$item}} 這裏顯示選中使用的是repeat ui-select中ng-modal的值，所以這裏直接使用item就可以顯示，如果ng-modal的值爲對象，這裏對應修改即可。
2.ui-select-choices 代表可選區域
1）這裏的下拉可選列表也是一個簡單的repeat，不多說。
2）ng-bind-html 這裏是綁定用戶所選擇的項，以高亮狀態展示

簡單的單選：

在上面代碼的基礎上，我們加上一個ng-change事件和一個搜索功能代碼如下：

<ui-select ng-model="demoChoose.value" theme="bootstrap" ng-change="changeDemoChooseList()">
            <ui-select-match>
                <span>{{demoChoose.value.name}}</span>
            </ui-select-match>
            <ui-select-choices repeat="c in (demoList | propsFilter: {id:$select.search, name: $select.search})">
                <div ng-bind-html="c.name | highlight: $select.search"></div>
            </ui-select-choices>
        </ui-select>

js代碼也做相應的修改：

$scope.demoList=[{
        id:'123',
        name: '張三',
    },{
        id:'456',
        name: '李四',
    },{
        id:'789',
        name: '王五',
    },{
        id:'1011',
        name: '趙六',
    }]
    //這裏這樣定義，是因爲官方文檔裏面 提到的這裏綁定的不能是一個簡單的對象
$scope.demoChoose={
        value: {
        }
    }
    $scope.changeDemoChooseList= function(){
        console.log($scope.demoList);
        console.log($scope.demoChoose);
    }

filter代碼如下：

app.filter('propsFilter', function () {
    return function (items, props) {
        var out = [];
        if (angular.isArray(items)) {
            items.forEach(function (item) {
                var itemMatches = false;
                var keys = Object.keys(props);
                for (var i = 0; i < keys.length; i++) {
                    var prop = keys[i];
                    var text = props[prop].toLowerCase();
                    if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
                        itemMatches = true;
                        break;
                    }
                }
                if (itemMatches) {
                    out.push(item);
                }
            });
        } else {
            out = items;
        }
        return out;
    };
})

然後看一下對應的效果：

簡單的多選：

只需要在ui-select裏面加上multiple就支持多選了

<ui-select ng-model="demoChoose.value" multiple theme="bootstrap" ng-change="changeDemoChooseList()">
            <ui-select-match>
                <span>{{$item.name}}</span>
            </ui-select-match>
            <ui-select-choices repeat="c in (demoList | propsFilter: {id:$select.search, name: $select.search})">
                <div ng-bind-html="c.name | highlight: $select.search"></div>
            </ui-select-choices>
        </ui-select>

js代碼如下：

$scope.demoList=[{
        id:'123',
        name: '張三',
    },{
        id:'456',
        name: '李四',
    },{
        id:'789',
        name: '王五',
    },{
        id:'1011',
        name: '趙六',
    }]

 $scope.demoChoose={
        value:[]
    }
    
    $scope.changeDemoChooseList= function(){
        console.log($scope.demoList);
        console.log($scope.demoChoose);
    }

最後看一下效果：

複雜的多選：

在ng-repeat中使用ui-select，且下拉選項所有ui-select公用。
舉個例子：selectA選中了張三，selectB選中了李四，那麼selectA與selectB的下拉列表應該都只有王五，趙六兩條數據。

這裏要說明一下：只有在可選列表中的項，才能夠在已選中顯示。

<div class="panel-body timeBox" ng-repeat="item in demoChoose">
        <ui-select ng-model="item.value" multiple theme="bootstrap" ng-change="changeDemoChooseList()">
            <ui-select-match>
                <span>{{$item.name}}</span>
            </ui-select-match>
            <ui-select-choices repeat="c in (item.demoList | propsFilter: {id:$select.search, name: $select.search})">
                <div ng-bind-html="c.name | highlight: $select.search"></div>
            </ui-select-choices>
        </ui-select>
    </div>

js代碼如下：

$scope.demoList=[{
        id:'123',
        name: '張三',
    },{
        id:'456',
        name: '李四',
    },{
        id:'789',
        name: '王五',
    },{
        id:'1011',
        name: '趙六',
    }]
    $scope.demoChoose=[{
        value:[],
        demoList: [],
    },{
        value:[],
        demoList: [],
    }]

    $scope.changeDemoChooseList= function(){
        //獲取所有選中項
        let choosed = [];
        angular.forEach($scope.demoChoose, function(item){
            angular.forEach(item.value, function(vitem){
                choosed[vitem.id] = true;
            })
        })
        //修改每一個select的下拉
        //這裏有一個有趣的問題大家可以去嘗試一下：
        /*choosed只取除自己以外的選中，下面的判斷就不需要再把自己選中的加進來，但是這樣寫會出現一個問題，
        就是選中列表裏面是有數據的，但是卻不顯示，是因爲這裏有一個active的概念，我們的下拉列表的數據來自於
        一個總的數據源，但是這個數據源是沒有記錄active的，而我們的選中列表和可選列表是有記錄active狀態的，
        所以這裏選擇的做法是：先去除所有選中的得到公用的下拉列表，然後再將自己的選中加到下拉列表中，
        這樣就ok了。*/
        angular.forEach($scope.demoChoose, function (item) {
            let nowChoosed = item.value;
            item.demoList = $scope.demoList.filter(function(ditem){
                return !choosed[ditem.id];
            })
            item.demoList = [...nowChoosed, ...item.demoList]
        })
    }

然後看一下效果：

最後希望大家都可以能夠很舒服的使用這個ui-select，如果我這裏有什麼問題，希望大家指出來，一起進步，一起成長。