ng-change doesn't work when select value changes

Question

Can you help me please? I have no idea of what this can be.

I'm using a template on my pages and each page has yours file js with angularJS code:

~/Content/Scripts/layout/index.js

~/Content/Scripts/home/home.js

~/Content/Scripts/projetos/projetos.js

I'm trying to call a function when the dropdown value changes, so i using ng-change in a partial-view.

My page _Layout:

<html lang="en" class="no-js" ng-app="App">
 ...

<!-- BEGIN CONTENT -->
                <div class="page-content-wrapper">
                    <div class="page-content">
                        @RenderBody()

                        @Scripts.Render("~/bundles/jquery")
                        @RenderSection("scripts", required: false)
                    </div>
                </div>
    <!-- END CONTENT -->

My partial-view is loaded when event click on menu occurrs

<div ng-cloak ng-controller="ProjetosController" ng-init="init()">
...

<div class="col-md-3">
      <label>Projetos</label>
          <div class="input-icon input-icon-lg">
                <select ng-change="changed()" data-placeholder="selecione..." class="form-control input-lg select2me" ng-model="Projetos"
                       ng-options="proj.Nome for proj in Projetos">
                           <option value=""></option>
                </select>
          </div>

But nothing happens and any error occurred when I look in Chrome's developer tools.

My controller c#

public JsonResult LoadProjetos()
        {
            var results = rep.LoadProjetos();//List<Projetos>();

            return Json(new
            {
                projetos = results
            }, JsonRequestBehavior.AllowGet);

        }

My controller js

var app = angular.module('App');    
app.controller('ProjetosController', function ($scope, $http) {        
    $scope.init = function () {
        $("#menu").find('li#projetos').addClass("start active");

        $http({
            method: 'GET',
            url: 'Projetos/LoadProjetos'
        }).then(function successCallback(response) {
            var projetos = response.data.projetos;
            $scope.Projetos = projetos;

        }, function errorCallback(response) {
            alert(response);
        });
    }

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

});

Any ideas? Thanks all

your `ng-model` on the select is wrong. `ng-model` should be bound to a variable that will hold the result of the select, not bound to the array that is being used to generate the list. — Claies, Dec 07 '15 at 17:03

jtsnr · Answer 1 · 2015-12-08T08:17:58.483

0

Try these changes so that your select uses a $scope variable:

<select ng-change="changed()" data-placeholder="selecione..." class="form-control input-lg select2me" ng-model="selectedItem"
   ng-options="proj.Nome for proj in Projetos">
   <option value=""></option>
</select>

$scope.changed = function () {
     alert($scope.selectedItem);
 }

http://plnkr.co/edit/uUf9ehxQpBSzVgQasTtN?p=info

edited Dec 08 '15 at 08:17

answered Dec 07 '15 at 17:21

jtsnr

1,180
11
18

Thanks again for your reply! I've made the changes exactly as you've suggested and again nothing happened. Now i'm using AngularJS v1.5.0-beta.2. One thing that I didn't say before, on my page Shared/_Layout.cshtml I have another controller ng-controller="LayoutController" to get name of user's session, this code is in ~/Scripts/layout/index.js to set it in a label, I dont know if this is important. I've searched a lot on goole but nothing never works, Could you help me out again? Thank you! – Ricardo G Saraiva Dec 10 '15 at 15:45
1

You will have to try various things to find out where the problem is. It's difficult - you have to keep trying things! For example, add a button to your page like this : and then make a selection from the drop-down and then click the button. Is the $scope.changed method being called now and does the alert give the selected value? – jtsnr Dec 10 '15 at 16:44
It works in the ng-click button but didn't works in the dropdown =Z – Ricardo G Saraiva Dec 10 '15 at 18:25

score 0 · Answer 2 · answered Dec 08 '15 at 14:11

0

If you use AngularJS version 1.2.x and the newest Chrome see this: https://code.google.com/p/chromium/issues/detail?id=565132

updated to 1.4.5 This should work.

answered Dec 08 '15 at 14:11

Michal Kómoch

114
5

Hi Michal! Updated to AngularJS v1.5.0-beta.2 and didn't work – Ricardo G Saraiva Dec 10 '15 at 13:20

score 0 · Accepted Answer · answered Aug 03 '16 at 20:25

0

After a long time, i found a solution. The problem is because my ng-model has the same name of the ng-option. I changed it and works fine!

Thx all.

answered Aug 03 '16 at 20:25

Ricardo G Saraiva

169
1
10

ng-change doesn't work when select value changes

3 Answers3