user3583721
user3583721

Reputation: 327

Simple ng-change not working properly in angularjs

I might be missing something stupidly as this simple code doesn't work as expected. What is wrong is the $scope.change function in the MainCtrl doesn't work (no alert box popped up).

In a nutshell, the view is (it's in jade, better to view?)

<body ng-app="epfApp">
...
label(ng-repeat="question in questions")
    | {{ question.title }}
    input(type="{{question.type}}", ng-change="change()")

and in the controller file

angular.module('epfApp')
.controller('MainCtrl', function ($scope, $window) {

    $scope.questions = {
        '1': {
                'title': 'The first question is?',
                'type': 'text',
                'placeholder': 'first question'
            },

        '2': {
                'title': 'The second question is?',
                'type': 'text',
                'placeholder': 'second question'
            }
    };

    $scope.change = function() {
        $window.alert('text');
    };

});

And the route:

$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  });

Now what it is doing properly is that it correctly populates the view with the data created (i.e. the questions json). However, What it is not doing properly is the change() function bound to the input textbox doesn't work.

What am I missing here? This obviously is a very basic job.

Upvotes: 15

Views: 67753

Answers (4)

Kevin Beal
Kevin Beal

Reputation: 10849

When the expression inside of the ng-change="" is something which errors (like with a spelling error) it will not log the error to the console. You will not know anything is amiss except for the fact that nothing happens.

Make sure to spell things correctly and to prefix the alias you give the "Controller As" syntax, if applicable.

Upvotes: 0

Krunal Modi
Krunal Modi

Reputation: 747

<div ng-app ng-controller="myCtrl">
<input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage()" />
<ul>
   <li ng-repeat="item in uploadcollection">
     {{item.name}}  ({{item.size}})
   </li>
</ul>

function myCtrl($scope) {
    $scope.uploadImage = function () {
        $scope.uploadcollection.push({name: "Income.pdf", size: "10mb"});
        $scope.$apply();
}
$scope.uploadcollection = [{name: "Income.pdf", size: "10mb"}, {name: "Expense.pdf", size: "1.5mb"}];
}

I have created a demo here: http://jsfiddle.net/fA968/120/

NOTE: This Example not worked with v1.4.8: https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js


Update Here is an simple way to do this:

var myApp = angular.module('myApp', []);
myApp.directive('customOnChange', function() {
return {
 restrict: 'A',
 link: function(scope, element, attrs) {
   var onChangeFunc = scope.$eval(attrs.customOnChange);
      element.unbind('change').bind('change', function(e) {
        onChangeFunc(e);
      });
   }
  };
});

Here is an updated Fiddle

Upvotes: 3

Sam P
Sam P

Reputation: 1841

ng-change requires ng-model as well.

<div ng-controller="MainCtrl">
    <label ng-repeat="question in questions">
        {{question.title}}
        <input type="{{question.type}}" ng-model="question.placeholder" ng-change="change()" />
        <br />
    </label>
</div>

Check out this JSFiddle.

Upvotes: 25

Pratik Parekh
Pratik Parekh

Reputation: 447

ng-change not working but it work if you define ng-model="yourValue"... like this

<select id="editSelect" ng-model="Option" ng-change="okChange()" name="Option">
    <option ng-repeat="data in Option" value="{{data.Option}}">{{data.Option}}</option>
</select>

Upvotes: 4

Related Questions