选择值更改时 ng-change 不起作用答案

【问题标题】：ng-change doesn't work when select value changes选择值更改时 ng-change 不起作用
【发布时间】：2015-12-04 17:13:53
【问题描述】：

你能帮帮我吗？我不知道这可能是什么。

我在我的页面上使用了一个模板，每个页面都有你的文件 js 和 angularJS 代码：

~/Content/Scripts/layout/index.js

~/Content/Scripts/home/home.js

~/Content/Scripts/projetos/projetos.js

我试图在下拉值更改时调用一个函数，所以我在部分视图中使用 ng-change。

我的页面_布局：

<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 -->

当事件点击菜单发生时，我的部分视图被加载

<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>

但是当我查看 Chrome 的开发者工具时，什么都没有发生，并且发生了任何错误。

我的控制器 c#

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

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

        }

我的控制器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');
    }

});

有什么想法吗？谢谢大家

【问题讨论】：

您的ng-model 选择错误。 ng-model 应该绑定到将保存选择结果的变量，而不是绑定到用于生成列表的数组。
对不起我的无知。可以举个例子吗？

标签： angularjs model-view-controller partial-views angularjs-ng-change

【解决方案1】：

尝试这些更改，以便您的选择使用 $scope 变量：

<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

【讨论】：

再次感谢您的回复！我已经完全按照您的建议进行了更改，但什么也没发生。现在我正在使用 AngularJS v1.5.0-beta.2。我之前没有说的一件事，在我的页面 Shared/_Layout.cshtml 我有另一个控制器 ng-controller="LayoutController" 来获取用户会话的名称，这段代码在 ~/Scripts/layout/index.js 中将其设置在标签中，我不知道这是否重要。我在goole上搜索了很多，但没有任何效果，你能再帮我一次吗？谢谢！
您将不得不尝试各种方法来找出问题所在。这很困难——你必须不断尝试！例如，向您的页面添加一个按钮，如下所示：然后从下拉列表中进行选择，然后单击该按钮。现在是否正在调用 $scope.changed 方法，警报是否给出了选定的值？
它在 ng-click 按钮中有效，但在下拉菜单中无效 =Z

【解决方案2】：

如果您使用 AngularJS 版本 1.2.x 和最新的 Chrome，请参阅： https://code.google.com/p/chromium/issues/detail?id=565132

更新到 1.4.5 这应该可以工作。

【讨论】：

嗨，米哈尔！更新到 AngularJS v1.5.0-beta.2 并没有工作

【解决方案3】：

找了很久，终于找到了解决办法。问题是因为我的 ng-model 与 ng-option 具有相同的名称。我改变了它并且工作正常！

谢谢。

【讨论】：