Angularjs 1.4 on-change not firing with Select

Question

app.js

var app = angular.module('plunker', []);
    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
       $scope.levels = [{LevelId:0,LevelName: "Level 1"}, {LevelId:1,LevelName: "Level 2" }];
        $scope.updateLevel = function() {
            console.log("Fired on change");
            $scope.result="Data Changed";
        }
    });

index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <label for="textbox3">Select Level</label>
  <select id="LevelSelect" class="form-control" ng-Change="updateLevel()" ng-model="selectedLevel" ng-options="lvl as level.LevelName for level in levels"></select>
  <p>{{result}}</p>
</body>

</html>

I referred to the various SO questions like on not calling the declared method and onchange not working. Advice.

Kalhan · Accepted Answer · 2015-07-09 07:14:59Z

3

The way you use ng-options is incorrect there for the rendered options values is getting undefined:undefined for all the options check below image, and when you change the selected item its not trigger ng-change event because all the values are same.

enter image description here

so change it to,

ng-options="level as level.LevelName for level in levels"

please refer this angular DOC

UPDATED PLUNKER

edited Jul 9, 2015 at 7:14

answered Jul 9, 2015 at 7:12

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Siva Karthikeyan Over a year ago

Excellent response. Thanks a lot Toress. It did made a difference after lot of struggle. :)

Kalhan Over a year ago

yea glad to help you :) and please go though the angular doc which i add, and use ng-change simple c, that will not cause any prob but its the standard. :) cheerz

Collectives™ on Stack Overflow

Angularjs 1.4 on-change not firing with Select

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related