CODEWITHSUNDEEP
javascriptangularjs
user3821206
user3821206

Reputation: 619

ng-change doesn't work with a select input

I have used the ng-change directive to call a method when I select each one from my Options in select input,but this method is called before I choose an option,so to resolve this problem this is my try:

    <select ng-model="produitId" ng-model-onblur ng-change="duplicateGammeProduit(produitId)">
        <option ng-repeat="pi in listProduitUsed" value="{{pi.id}}">{{pi.reference}}</option>
    </select>

    app.directive('ngModelOnblur', function() {
        return {
            restrict: 'A',
            require: '^ngModel',
            priority: 1, 
            link: function(scope, elm, attr, ngModelCtrl) {
                if (attr.type === 'radio' || attr.type === 'checkbox') return;

                elm.unbind('select').unbind('change');
                elm.bind('blur', function() {
                    scope.$apply(function() {
                        ngModelCtrl.$setViewValue(elm.val());
                    });         
                });
            }
        };
    })

   .controller(
        'GammeCtrl', [
            '$scope',
            '$http',

            function($scope, $http) {

    $scope.duplicateGammeProduit = function(produitId) {
      $http.get(MyURL:" +produitId).success(
           function(gammeProduit) {                                     
          //the method to be called when an option is selected          
      $scope.classifierListElementGamme(gammeProduit.listElementGamme);
           gammeProduit.id = null
           $scope.gammeCourante.tempsTotal = gammeProduit.tempsTotal;
           $scope.gammeCourante.nbOperation = gammeProduit.nbOperation;                                 
           angular.forEach(gammeProduit.listElementGamme,
                 function(elementGamme, key){
                   elementGamme.id = null;
                });

            $scope.finalOperationsList = gammeProduit.listElementGamme;
            $scope.formToSave.finalOperationsList = $scope.finalOperationsList;
          });
       }

  $scope.listeProduitUsed = function() {
                $http
                    .get(URL/getProduitListUsed")
                    .success(
                        function(dataProduit) {

                            $scope.listProduitUsed = dataProduit;
                        });}
      $scope.listeProduitUsed();

}]);

but now I have an other error the ng-change method doesn't work any help please thanks for help

Upvotes: 0

Views: 647

Answers (2)

Hadi
Hadi

Reputation: 17289

try like this.

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

app.controller("MyCtrl" , function($scope){
   $scope.items = [{name:"ali"},{name:"reza"}];
  
  $scope.dropdown = $scope.items[0];
  $scope.duplicateGammeProduit = function(dropdown){
    alert(dropdown);
    }
  
  });
app.directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: '^ngModel',
        priority: 1, 
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('select').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   
  <select ng-model="dropdown" ng-options="item as item.name for item in items" ng-model-onblur ng-change="duplicateGammeProduit(dropdown)">
        <option value="">--- Select an item---</option> 
       
    </select>  
</div>

Upvotes: 1

sumair
sumair

Reputation: 386

Try this

<select
   ng-options="pi.id as pi.reference for pi in listProduitUsed" 
   ng-model="produitId" ng-change="duplicateGammeProduit(produitId)"></select>

Upvotes: 1

Related Questions