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();
})
The problem appears to be incompatible library versions. The video you posted is from 2012 when Angular was back on v1.0.1. Looking back at simpulton's directive on github, you can see that they've changed it to use CDNs as follows:
So, try changing the versions of the libraries you are using and then you should start to see the
$scope.recipientsvariable populated correctly in the controller.NOTE: You don't have to use those versions specifically, I'm just pointing out that that's a combination of library versions that does work.