CODEWITHSUNDEEP
javascripthtmlangularjscombobox
SethMc
SethMc

Reputation: 119

How to pass multi-value variable to AngularJS Directive

I'm working on a very simple little AngularJS directive at the moment. I have only just started working on it so there isn't much there. Also, I'm very new to AngularJS so please try to keep your answers simplified if possible!

Basically, this directive is going to be a simple combobox. In case you don't know what I mean by a combobox it is a drop-down box that shows results filtered by the text the user types into the search bar.

The part I'm stuck on currently is try to add a categories feature. I would like the elements in the drop-down box to be organized by categories. The left side of this picture is a good example of what I mean:

enter image description here

In my code below, what would I need to do to allow the user of the directive to pass a list of their elements and the categories those elements are assigned to?

Index.html

    <!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="bossy.combobox.js"></script>

    <head>
      <title>60minish tutorial</title>
    </head>

    <body>

        <div ng-app="test">
            <director 
            data='{elements: ["Apple","Banana","Celery","Carrots"], multi:true}'
            ></director> 
        </div>

    </body>
</html>

combobox.js:

    function testContoller($scope){
        $scope.elements = $scope.data.elements;

        $scope.list = $scope.elements.slice();

        $scope.selectedElements = [];

        $scope.submitElement = function(element) 
        {
            if($scope.selectedElements.indexOf(element) == -1) 
            {
                $scope.selectedElements.push(element);

                var index = $scope.list.indexOf(element);
                $scope.list.splice(index, 1);
            }
        }

        $scope.removeElement = function(element) 
        {
            $scope.list.push(element);

            var index = $scope.selectedElements.indexOf(element);
            $scope.selectedElements.splice(index, 1);
        }
}

function create(){
    var template =  '{{elements}}'+
                    '<br>'+
                    '<div><input type="text" value="John" data-ng-model="name"/></div>'+
                    '<select>'+
                        '<option data-ng-repeat="element in list| filter:name" ng-click="submitElement(element)">{{element}}</option>'+
                    '</select>'+
                    '<ul>'+
                        '<li data-ng-repeat="element in selectedElements">{{element}} <button ng-click="removeElement(element)">x</button> </li>'+
                    '</ul>'+
                    '<div data-ng-repeat="x in elements| filter:name">{{x}}</div>';

  return {

    restrict: 'E',

    scope: {
        data: '='
    },
    template: template,
    controller: testContoller,

  };
}


create.$inject = [];

testContoller.$inject = ['$scope'];

angular.module('test',[])
        .controller('init', testContoller)
        .directive('director', create);

Upvotes: 0

Views: 732

Answers (1)

Leo Javier
Leo Javier

Reputation: 1403

Here: http://plnkr.co/edit/GzO6I70y1pWm1RedLLEd?p=preview The data is hardcoded... but I think you can take it from here...

HTML

<select>
  <optgroup ng-repeat="category in categories" label="{{category}}">
    <option ng-repeat="category in products | filter: category"  value="volvo">{{category.name}}</option>
  </optgroup>
</select>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.categories = [];

  $scope.products = [
    {
      category:'fruits',
      name:'Apple' 
    },
    {
      category:'fruits',
      name:'Pearl' 
    },
    {
      category:'meat',
      name:'Sirloin' 
    },
    {
      category:'meat',
      name:'Beef' 
    },
    {
      category:'meat',
      name:'Chicken' 
    }
    ];

    for (var i = 0; i < $scope.products.length; i++) {
      var element = $scope.categories.indexOf($scope.products[i].category);

      if (element == -1) {
        $scope.categories.push($scope.products[i].category);
      }
    }
});

Upvotes: 1

Related Questions