【问题标题】:ng-change not working on ng-selectng-change 不适用于 ng-select
【发布时间】:2014-08-20 04:35:15
【问题描述】:

我正在使用由ng-options 填充的选择框。不幸的是,我无法调用我的 ng-change 函数。

Here is my Fiddle

这是我的js

var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {

    $scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
    ];

    $scope.scopeMessage = "default text";
    var changeCount = 0;

    $scope.onSelectChange = function()
    {
       changeCount++;
        this.message = "Change detected: " + changeCount;
    }.bind($scope);

    //$scope.form = {type : $scope.typeOptions[0].value};
    $scope.form = $scope.typeOptions[0].value;
}

这是我的HTML

<div ng-controller="MyCtrl" class="row">
    <select ng-model='form' required ng-options='option.value as option.name for option in typeOptions' ng-change="onSelectChange"></select>

    <div style="border:1px solid black; width: 100px; height:20px;">{{scopeMessage}}<div>
</div>

这目前阻碍了我的工作项目,因此我们将不胜感激任何帮助。谢谢!

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    两件事...都很简单:)

    1. ng-change=onSelectChange 应该是 onSelectChange()
    2. this.message 应该是 this.scopeMessage

    【讨论】:

    • 这个确实应该是公认的答案。测试 user45763 的 jsFiddle 显示文本框不会更改为“检测到更改”,这是 Timothy 在此答案中的原因 #2。
    • @MichaelMahony 问题是“...我无法调用我的 ng-change 函数。”。我是第一个回答错误的人,这就是为什么我的答案成为公认的答案是有意义的。
    • @user45763 我明白你在说什么,但是当你阅读他的代码时,他希望更改也更改文本框。对我来说,一个完整的答案可以让你一路找到解决方案。蒂莫西做到了这一点。您的回答很有帮助,只是(在我看来)不完整。
    • 很抱歉,我整整一年都没有回顾这个。是的@MichaelMahony,你是对的。是时候解决问题了。
    • 哇哦!我得到了接受的答案!谢谢@WebWanderer :)
    【解决方案2】:

    您的问题是您将函数引用传递给 ng-change 指令。但是,该指令需要一个可以评估的表达式。因此,将括号附加到函数,以便可以将其作为函数调用进行评估。

    喜欢这里:http://jsfiddle.net/MTfRD/1101/

    <select ng-model='form' required ng-options='option.value as option.name for option in typeOptions' ng-change="onSelectChange()"></select>
    

    【讨论】:

      猜你喜欢
      • 2016-11-05
      • 2015-03-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-01-11
      • 1970-01-01
      相关资源
      最近更新 更多