select2.js multiple
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css">
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<fieldset data-ng-repeat="choice in choices">
<select class="selection" style="width:300px">
<option/>
<!-- <option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An" selected>Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option> -->
</select>
<input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
CSS
fieldset {
background: #FCFCFC;
padding: 16px;
border: 1px solid #D5D5D5;
}
.addfields {
margin: 10px 0;
}
#choicesDisplay {
padding: 10px;
background: rgb(227, 250, 227);
border: 1px solid rgb(171, 239, 171);
color: rgb(9, 56, 9);
}
.remove {
background: #C76868;
color: #FFF;
font-weight: bold;
font-size: 21px;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 9px;
vertical-align: top;
line-height: 100%;
}
input[type="text"],
select {
padding: 5px;
}
JavaScript
$(".selection").select2({
placeholder: 'Select an option...',
minimumInputLength: 2,
allowClear: true,
data: [{
id: 0,
text: "iPhone 6"
}, {
id: 1,
text: "iPhone 5S"
}, {
id: 2,
text: "iPad 2"
}]
}).on('onfocus', function() {
console.log('something!!!');
});
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{
id: 'choice1'
}, {
id: 'choice2'
}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({
'id': 'choice' + newItemNo
});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length - 1;
$scope.choices.splice(lastItem);
};
});