<!DOCTYPE html>
<html ng-app="MetronicApp">
<head>
<link data-require="select2@3.5.1" data-semver="3.5.1" rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.5/select2.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" data-semver="1.11.0" data-require="jquery@1.11.0"></script>
<script src="https://code.angularjs.org/1.3.10/angular.js" data-semver="1.3.10" data-require="angular.js@*"></script>
<script src="app.js"></script>
<script data-require="select2@3.5.1" data-semver="3.5.1" src="//cdn.jsdelivr.net/select2/3.5.1/select2.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div ng-controller="ClientController">
<form role="form" action="#">
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" class="form-control" ng-model="client.name" />
</div>
<div class="form-group">
<label class="control-label">Status</label>
<select class="form-control select2me" ng-model="client.status">
<option value="POTENTIAL">Potential</option>
<option value="NEGOTIATION">Negotiation</option>
<option value="AT_WORK">At Work</option>
<option value="IDLE">Idle</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Comments</label>
<textarea class="form-control" rows="3" ng-model="client.comments"></textarea>
</div>
<div class="form-group">
<label class="control-label">Contacts</label>
<div class="form-group" ng-repeat="contact in client.contacts" on-finish-init-ajax>
<div class="form-inline">
<input type="hidden" name="id" ng-model="contact.id" />
<a href="#" class="btn btn-icon-only red" ng-click="deleteContact(contact)">
<i class="fa fa-times"></i>
</a>
<div class="form-group">
<label class="sr-only" for="contact-role-{{ contact.id }}">Role</label>
<input class="form-control" id="contact-role-{{ client.id }}" placeholder="Role" type="text" ng-model="contact.role">
</div>
<div class="form-group">
<label class="sr-only" for="contact-person-{{ contact.id }}">Person</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="hidden" class="form-control select2remote input-medium" ng-model="contact.person.id" value="{{ contact.person.id }}" data-display-value="{{ contact.person.name }}" data-remote-search-url="api_post_person_search" data-remote-load-url="api_get_person"
ng-change="updatePerson(contact, contact.person)" />
</div>
</div>
<div class="checkbox">
<label class="uniform-inline">
<input type="checkbox" value="" ng-model="client.primary" />Primary
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="form-inline">
<a href="#" class="btn btn-icon-only green" ng-click="addContact()">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
<div class="margiv-top-10">
<a href="#" class="btn green-haze">
Save Changes </a>
<a href="#" class="btn default">
Cancel </a>
</div>
</form>
</div>
</body>
</html>
var MetronicApp = angular.module("MetronicApp", [])
.controller('ClientController', function ($scope) {
$scope.client = {
"readable_status":"At Work",
"id":1,
"name":"Client's name",
"country":"An awesome country",
"region":"And an awesome region",
"city":"Not so awesome city",
"comments":"Commenting about the client",
"status":"AT_WORK",
"contacts":[
{
"id":5,
"primary":true,
"role":"CEO",
"person":{
"id":7,
"name":"John Doe",
"email":"john@gmail.com",
"phone":"555-johndoe",
}
},
{
"id":11,
"primary":false,
"role":"CFO",
"person":{
"id":3,
"name":"Jane Doe",
"email":"jane@gmail.com",
"phone":"555-janedoe",
}
}
]
};
$('.select2remote').on('change', function () {
console.log('change');
var value = $(this).value;
$scope.$apply(function () {
$scope.contact.person.id = value;
});
});
$scope.addContact = function () {
$scope.client.contacts.push({});
};
$scope.deleteContact = function (contact) {
$scope.client.contacts.splice($scope.client.contacts.indexOf(contact), 1);
};
$scope.updatePerson = function (contact, person) {
console.log('ng change');
}
$scope.$watch("client.contact", function (newVal, oldVal) {
console.log('$scope.$watch client.contact');
}, true);
$scope.$watch("client", function () {
console.log('$scope.$watch client');
}, true);
});
$(document).ready(function() {
var $elements = $('input[type=hidden].select2remote');
$elements.each(function() {
var $this = $(this);
if ($this.data('remote-search-url') && $this.data('remote-load-url')) {
$this.select2({
placeholder: "Select",
allowClear: true,
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: 'search.json',
dataType: 'json',
delay: 250,
data: function(term, page) {
return {
query: term, // search term
};
},
results: function(data, page) { // parse the results into the format expected by Select2.
return {
results: $.map(data, function(datum) {
var result = {
'id': datum.id,
'text': datum.name
};
for (var prop in datum) {
if (datum.hasOwnProperty(prop)) {
result['data-' + prop] = datum[prop];
}
}
return result;
})
}
}
},
initSelection: function(element, callback) {
// the input tag has a value attribute preloaded that points to a preselected movie's id
// this function resolves that id attribute to an object that select2 can render
// using its formatResult renderer - that way the movie name is shown preselected
var id = $(element).val(),
displayValue = $(element).data('display-value');
if (id && id !== "") {
if (displayValue && displayValue !== "") {
callback({
'id': $(element).val(),
'text': $(element).data('display-value')
});
} else {
$.ajax('load.json', {
dataType: "json"
}).done(function(data) {
callback({
'id': data.id,
'text': data.name
});
});
}
}
},
});
}
$this.on('change', function() {
console.log('on change event');
});
});
});
{
"id":7,
"name":"John Doe",
"email":"john@gmail.com",
"phone":"555-johndoe",
}
[{
"id": "1",
"name": "1 Doe",
"email": "1@gmail.com",
"phone": "1"
}, {
"id": "2",
"name": "2 Doe",
"email": "2@gmail.com",
"phone": "2"
}, {
"id": "3",
"name": "Jane Doe",
"email": "jane@gmail.com",
"phone": "5"
}, {
"id": "4",
"name": "4 Doe",
"email": "4@gmail.com",
"phone": "4"
}, {
"id": "5",
"name": "5 Doe",
"email": "5@gmail.com",
"phone": "5"
}, {
"id": "6",
"name": "6 Doe",
"email": "6@gmail.com",
"phone": "6"
}, {
"id": "7",
"name": "John Doe",
"email": "john@gmail.com",
"phone": "555-johndoe"
}]