Back-end delivered to AngularJS controller a list of objects.
I would like to create an input with them all filterable by name and with checkbox for each with possibility to select many.
Desired outcome is that user clicks on an input / a button, and then:
Drop-down opens with all the names, and on the top of it there is text filter input
Below the text filter input are all the names, one under another
Next to each name there is a checkbox
User can type text to filter names
User selects chosen names via checkboxes
User clicks submit and all selected names are send to the back-end
I got lost with all the inputs, checkboxes, labels, divs.
So far I'm here:
app.controller.js
myApp.controller('myAppController', ['$scope','$http','$log','$modal','$filter','myAppService',
function($scope, $http, $log, $modal, $filter, myAppService) {
$scope.myObjects = [];
myAppService.getMyObjects().then(function(response) {
$scope.myObjects = response.data;
});
myAppService.getProdFamilies().then(function(response) {
$scope.prodFamilies = response.data;
});
$scope.submitNew = function() {
$http({
method: 'POST',
url: '/app/submit',
data: {
ids: $scope.newform.something,
}
})
};
}
]);
form.jsp: (I would like to have filter inside drop-down, with possibility to select many names of course)
<form ng-submit="submitNew()">
<div>
Search <input type="text" ng-model="search">
<br>
<select ng-model="newform.something" ng-options="obj.name for obj in myObjects | filter:search">
<option ng-repeat="obj in myObjects" ng-value="obj.name" ng-selected="obj.name == newform.something"> </option>
</select>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
Aucun commentaire:
Enregistrer un commentaire