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

Question

Please see this relevant jsFiddle

在代码中，我试图在选择不同选项时触发一个方法来提醒用户。但是没有事件被触发

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 声明您的应用程序.

这是你的 fiddle 设置

这是一个 Angular fiddle 设置

第三，使用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!");   
    }    
}]);

这是一个工作 fiddle http://jsfiddle.net/ctbLparv/

此外，如果您只想根据选择设置属性，则不需要使用 ng-change .您可以依赖双向绑定(bind)。

例如，这个 fiddle :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>