CODEWITHSUNDEEP
javascriptangularjsarrays
Mohit_Singh
Mohit_Singh

Reputation: 1

I am trying to pass a function to a directive i created but it's not working in angularjs

I want to add a chip in the above box when i select it from the drop down so i have created a filter for that and i have passed an array to it bt now the function which was adding the chip to the above box is now not working i don't know why.

The controller code:

var app = angular.module("myApp", []);
app.controller("appController", function ($scope) {
    $scope.selected = [{
        'id': 1,
        'state': 'UP'
    }, {
        'id': 2,
        'state': 'Delhi'
    }];
    $scope.options = [{
        'id': 1,
        'state': 'UP'
    }, {
        'id': 2,
        'state': 'Delhi'
    }, {
        'id': 3,
        'state': 'Haryana'
    }, {
        'id': 4,
        'state': 'WB'
    }]
    $scope.add = function (item) {
        console.log(item);
        let insert = true;
        item = JSON.parse(item);
        for (let i = 0; i < $scope.selected.length; i++) {
            if (angular.equals(item, $scope.selected[i])) {
                insert = false;
                break;
            }
        }
        if (insert == true) {
            $scope.selected.push(item);
            $scope.selected = angular.copy($scope.selected);
        }
    };
    $scope.remove = function (item) {
        let a = item;
        let b = $scope.selected.indexOf(a);
        $scope.selected.splice(b, 1);
    };
});
app.directive("filter", function () {
    return {
        restrict: 'E',
        scope: {
            param: '=',
            array: '=',
            fun: '&'
        },
        template: "<div ><select ng-change='fun(items)' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select>"
    };
});

And the view:

<body ng-app="myApp" ng-controller="appController">
    <div>
        <div class="chip" ng-repeat="chips in selected">
          {{ chips.state }}
          <span class="closebtn" ng-click="remove(chips)">&times;</span>
        </div>
    </div>
    <filter array='options' fun='add(param)'></filter>
</body>

The complete code can be found in this fiddle.

Upvotes: 0

Views: 50

Answers (2)

Andrei Roba
Andrei Roba

Reputation: 2322

I've had a look at this code. Apart from a few errors, the only problem I see is passing data from the directive scope back to the parent. My suggestion would be to refactor the directive as:

app.directive("filter", function() {
  return {
    restrict: 'E',
    scope: {
      // selection: '=',
      array: '=',
      fun: '&'
    },
    template: `<div>
  <select ng-change='fun({ selection: selection })' ng-model='selection'>
    <option value='' selected disabled hidden>Choose Here</option>
    <option ng-repeat='item in array' value={{item}}> {{item.state}}</option>
  </select>
</div>`
  };
});

as you can see, you don't really need selection in the parent, as it belongs to the 'filter' component. However, you share this data by passing it to the fun attribute (which is the function you call on selection change).

A simplified version of the controller would then be:

$scope.add = function(selection) {
  var item = JSON.parse(selection);
  for (let i = 0; i < $scope.selected.length; ++i) {
    if ($scope.selected[i].id === item.id) {
      return;
    }
  }
  $scope.selected.push(item);
};

$scope.remove = function(item) {
  let index = $scope.selected.indexOf(item);
  $scope.selected.splice(index, 1);
};

A working version of the initial fiddle can be found here.

Upvotes: 2

Imdad Ali
Imdad Ali

Reputation: 737

change below line in your directory

template: "<div ><select ng-change='fun(items)' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select>"

to

template: "<div ><select ng-change='fun({param: items})' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select></div>"

Upvotes: 0

Related Questions