基于angularjs的select控件, 支持单选多选

前言

由于项目需要做了一个基于angularjs的select控件, 支持单选多选,和非空验证。

效果展示

单选: 当前选择：

代码：

<angular-select require="必须要填啊" tip-direction="1" submit-btn-id="submitBtn"  ng-model="selectedModel2" select="selectChange2()" multiple="false" ng-data-source="dataList.a" > < /angular-select>

多选: 当前选择：

代码：

<angular-select placeholder="请选择" require="必须要填啊" tip-direction="1" submit-btn-id="submitBtn"  ng-model="selectedModel" select="selectChange()" multiple="true" ng-data-source="dataList.a" > < /angular-select>

控制器代码

demo controller:

angular.module('ngTest',['angularSelect']);
        
angular.module('ngTest').controller('ctrl',['$scope',function($scope){
    
    $scope.dataList = [
        {name:"wz",value:1},
        {name:"Ab",value:2},
        {name:"333",value:3},
    ];
    $scope.bb = "wwz";
    $scope.selectedModel =[ $scope.dataList[0] ];
    $scope.selectedModel2 = {};
    $scope.selectedModel2.a = null;
    $scope.selectChange = function(item){
        console.info("select :" +　JSON.stringify(item));
    };
    $scope.selectChange2 = function(item){
        console.info("select :" +　JSON.stringify(item));
    };
    $scope.submit = function(){
        if ($scope.myForm.$valid){
            alert("do submit!");
        }
        else{
            alert("表单有错误！");
        }
    }
}]);

需要

angular.js v1.3 +
http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js
jquery.js v1.11 +
http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js
select2.js v3.5 +
https://cdn.bootcss.com/select2/3.5.1/select2.min.js https://cdn.bootcss.com/select2/3.5.1/select2.min.css
layer.js v2.1 + （修改过源码，请从本站下载）
点击这里
angular-select.js v1.0 +
点击这里

一些说明

使用'require="必须要填哦"'或者'require' 使表单成为必填项;并且要指定'submit-btn-id'的属性为表单提交按钮的id。
使用tip-direction="1" 设置错误提示弹出方向，1、2、3、4 分别代码上、右、下、左.
使用disabled="true" 控制表单为只读项
使用multiple="true" 控制表单为多选
使用placeholder="请选择" 控制表单的提示信息
单选和多选的区别：

注意：单选模式绑定的是选择值的value
```
1
```
多选模式绑定的是一个数组对象:
```
[{value:1,name:"wz"}]
```