CODEWITHSUNDEEP
angularjs
Siva Karthikeyan
Siva Karthikeyan

Reputation: 554

Angularjs 1.4 on-change not firing with Select

Please find the plunker code

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.

Upvotes: 2

Views: 838

Answers (1)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

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

Upvotes: 3

Related Questions