jeudi 16 avril 2020

AngularJS: form input - select many with filtering and checkboxes for every row

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