Multi-select widget (latest)

by alalonde

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script src="https://rawgithub.com/alalonde/angular-multi-select/master/angular-multi-select.js"></script>
<div ng-controller="MyCtrl">
  <form name="selectForm">
    <multi-select ng-model="user.roles" available="roles" selected-label="Current roles" available-label="Available roles" display="r as r.roleName" required-min="1"></multi-select>
    <div class="input-error" ng-show="selectForm.numSelected.$error.min">
        Please select at least one role.</div>
    <div>{{ user.username }}'s roles: </div>
    <ul class='detail'>
      <li ng-repeat="role in user.roles">{{ role.roleName }}</li>
    </ul>    
  </form>
</div>

CSS

.multiSelect {
    overflow: auto;
    padding-bottom: 10px;
}
.multiSelect .select {
    margin-right: 20px;
    float: left;
}
.multiSelect .text {
    clear: both;
    font-size: 11px;
}
.multiSelect label.control-label::after {
    content: ":";
}
.multiSelect label.checkbox {
    margin-bottom: 0;
}
.btn.mover {
    display: block;
    margin-top: 25px;
    vertical-align: top;
}
.btn.mover.left {
    padding: 6px 8px 6px 6px;
}
.btn.mover.right {
    margin-top: 5px;
    padding: 6px 7px;
}
.buttons.stacked .btn.mover {
    margin: 0 0 10px 0;
}
.btn.mover.left i, .btn.mover.right i {
    margin: 0;
}

/* demo css */
ul.detail li {
    list-style-type: disc;
}
.input-error {
    color:#b94a48;
}

JavaScript

var myApp = angular.module('myApp',['multi-select'])
.controller('MyCtrl', function($scope) {
    $scope.roles = [
        {roleId: 1, roleName: "Administrator"},
        {roleId: 2, roleName: "Super User"}
    ];
    
    $scope.user = {
        userId: 1, 
        username: "JimBob",
        roles: [$scope.roles[0]]
    };
})
;