CODEWITHSUNDEEP
angularjsdrop-down-menuangularjs-directiveangular-ngmodel
Dmitrii Yurevich
Dmitrii Yurevich

Reputation: 51

Selected item in directive not working

I created a select directive and am using this directive twice. I need to see the selected items of both. What should I do?

HTML

<div select-list="items"></div>
<div select-list="items2"></div>

Controller

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

myApp.controller('mainController', function($scope) {
    $scope.items = [
        {
            name: "1"
        },
        {
            name: "2"
        }
    ];

    $scope.items2 = [
        {
            name: "3"
        },
        {
            name:"4"
        }
    ];

    $scope.selectedValues = [];
});

Select directive

myApp.directive("selectList", function() {
    return {
        restrict: "EACM",
        template: '<select ng-model="selectedValues" ng-options="item.name for item in data"></select>',
        scope: {
            data: '=selectList'
        }
    }
});

I need to add selected items of both "selects" into $scope.selectedValues. I tried through ng-change, but it didn't work.

Upvotes: 1

Views: 347

Answers (2)

toutpt
toutpt

Reputation: 5220

Your directive use isolated scope, so you can't access from the controller to the directive or from the directive to the controller.

You have to create a new entry.

I let you a fiddle that is working :

https://jsfiddle.net/Lv1q2sh2/1/

// Code goes here
var myApp = angular.module('app', []);
angular.module('app')
.directive("selectList", function(){
  return {
      restrict: "EACM",
      require: 'ngModel',
      template: '<select ng-model="selected" ng-change="onSelectedValue()" ng-options="item.name for item in data"></select>',
      scope: {
          data: '=selectList'
      },
      link: function (scope, element, attr, ngModel) {
        scope.onSelectedValue = function () {
            ngModel.$setViewValue(scope.selected);
        }
      }
  }
})
.controller('mainController', function($scope) {
  $scope.items = [
      {name: "1"},
      {name: "2"}
  ];
  $scope.items2 = [
      {name:"3"},
      {name:"4"}
  ];
  $scope.selectedValues = [];
});

Upvotes: 1

rupampatel
rupampatel

Reputation: 300

Directive needs to be created properly:

  1. Have a controller for your directive
  2. If you are using isolated scope, make sure to pass selectedValue to the scope. ex:

Directive:

myApp.directive("selectList", function(){
return{
    restrict: "EACM",
    template: '<select ng-model="selectedValues" ng-options="item.name for item in data"></select>',
    scope: {
        data: '=selectList',
        ngModel: '='
    }
    //Add link function here, crate watcher on ngModel and update it back on select dropdown selection.
})};

HTML:

<div select-list="items" ng-model="selectedValue1" ></div>
<div select-list="items2" ng-model="selectedValue2"></div>

Add link function to directive and put a watcher on ngModel, once user makes change in selection, update parent ng-model.

Upvotes: 0

Related Questions