Question

在代码中我尝试在选择其他选项以警告用户时触发方法。但是没有触发任何事件

HTML：

<div ng-controller = "MyCtrl"> 
<p>Term</p>
  <select id = "term" ng-change="test()">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
  </select>       

</div>

JS：

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

app.controller('MyCtrl',['$scope','$element', function($scope, $element) {

    $scope.test = function () {
     alert ("changed!");   
    }


}]);

Answer 1

你有一些问题。

首先：<div ng-controller = "MyCtrl"> - 介于两者之间。

其次，您没有使用ng-app声明您的应用。 这是因为你把你的小提琴设置为jquery，而不是Angular。如果你把它设置为棱角分明，你就不需要这个小提琴了

这是你的小提琴设置

这是一个角度小提琴设置

第三，要将select与AngularJS一起使用，您需要在ng-model标记上添加select。在这种情况下，我刚使用bob

<div ng-app="HelloApp"> <!-- declare your angular app. typically would go on body or html -->
    <div ng-controller="MyCtrl"> 
        <p>Term</p>
                    <select ng-model="bob" ng-change="test()">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                    </select>       
    </div>
</div>



var app = angular.module('HelloApp', []);  
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
console.log('ctrl working');
    $scope.test = function () {
     alert ("changed!");   
    }    
}]);

这是一个工作小提琴 http://jsfiddle.net/ctbLparv/

此外，如果您打算根据选择设置属性，则无需使用ng-change。你可以依靠双向绑定。

例如，这个小提琴：http://jsfiddle.net/ps8jnyL8/

没有调用选择。我们还会在首次加载时将所选术语默认为10.

<div ng-app="HelloApp">
    <div ng-controller="MyCtrl"> 
    <p>Term</p>
        <select ng-init="selectedTerm = '10'" ng-model="selectedTerm">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
        </select>   
        <p>Selected Term: {{selectedTerm}}</p>    
    </div>
</div>

Answer 2

这是工作中的JSFiddle：

https://jsfiddle.net/G8S32/1162/

主要的变化是添加这一行：

ng-model="items"

除了更新模型并导致事件触发之外什么都不做。

查看ng-change的文档：

https://docs.angularjs.org/api/ng/directive/ngChange

特别是这一行：

只有在输入发生变化时才会评估ngChange表达式 value会将新值提交给模型。

Angular - ng-change在选择更改时不会触发

2 个答案: