I've been following the instructions in this video to make my own mulitselect searchable dropdown menu with angular and chosen.
I was wondering if anyone could help me figure out how to save the selection to a variable so I can then send it from client side to server side and use it as input for a python script. Preferably, I would like to do that on click. I added a dummy button ...
I can access ng-model values from within the html, but not in the app/the controller.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Choose</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="chosen.min.css">
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<style type="text/css">
.span4 {
width: 300px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="js/the_app.js"></script>
</head>
<body>
<form action="#" class="container" ng-controller="JumpersController">
<h1>Choose:</h1>
<select data-placeholder="Choose" multiple class="span4 chzn-select" chosen ng-model="recipients" ng-options="recipient.name for recipient in jumpersList"></select>
<p ng-repeat="recipient in recipients">{{recipient.name}}</p>
<input type="button" ng-click="" value="Gimme!"></input>
</form>
</body>
</html>
the_app.js
var app = angular.module('myApp', []);
app.directive('chosen', function() {
var linker = function(scope,element,attr) {
scope.$watch('jumpersList',function() {
element.trigger("chosen:updated");
})
element.chosen();
};
return {
restrict:'A',
link: linker
}
})
app.controller('JumpersController', function($scope,$http) {
$scope.url = 'master_dict.json';
$scope.jumpersList = [];
$scope.fetchJumpers = function() {
$http.get($scope.url).then(function(result){
$scope.jumpersList = result.data;
});
}
$scope.fetchJumpers();
})
