ng-change无法使用下拉列表

时间:2015-10-10 15:03:25

标签: angularjs-directive

在代码ng-change无法正常工作时会出错。为什么?每次选定的值发生变化时,我都需要执行方法show()。此外,只有在选择有效列表值后,才能看到以下div标记。



 <div class="form-group">
 <label>SOURCE</label>
 <select class="form-control" name="ddlFirst" ngmodel="ddlSource" ng-change="show()">
 <option value="null" ng-selected="true">--Select Sprint--</option>
 <option  ng-repeat="s in AllS" value="{{s.Id}}">{{s.Name}}</option>
 </select>
 </div>

//this div should be visible only when a valid list value is selected.s.id will hv +ve value on valid list value selection

<div ng-show="ddlSource==isNumber()">
 <label> hiiiiii</label>
</div>


result is:

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngChange', can't be found!
http://errors.angularjs.org/1.3.15/$compile/ctreq?p0=ngModel&p1=ngChange
    at REGEX_STRING_REGEXP (angular.js:64)
    at getControllers (angular.js:7584)
    at nodeLinkFn (angular.js:7773)
    at compositeLinkFn (angular.js:7118)
    at compositeLinkFn (angular.js:7121)
    at nodeLinkFn (angular.js:7764)
    at compositeLinkFn (angular.js:7118)
    at compositeLinkFn (angular.js:7121)
    at compositeLinkFn (angular.js:7121)
    at compositeLinkFn (angular.js:7121)
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

ng-change需要ng-model指令。在你的代码中  <select class="form-control" name="ddlFirst" ngmodel="ddlSource" ng-change="show()">

它应该是ng-model而不是ngmodel。

这是Plunker Link

我已经从您的代码中创建了一个示例,用于检测下拉列表中的更改。

<div ng-controller='CalcCtrl'>
<label>SOURCE</label>
 <select class="form-control" name="ddlFirst" ng-model="ddlSource" ng-change="show()">

 <option  ng-repeat="s in AllS" value="{{s.Id}}">{{s.Name}}</option>
 </select>
 </div>

我的jsfile看起来像这样。

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

myApp.controller('CalcCtrl', function ($scope) {
    $scope.AllS=[{Name:"ram",Id:'1'},{Name:"shyam",Id:'2'}];
    $scope.show = function(){alert("changed");}
});

我希望这可以解决你的问题。

答案 1 :(得分:0)

当你看到这个Camel套管错误抱怨angularjs错误日志的指令时,只需要专业提示。您应该自动知道自己错过了-的内容,在这种情况下,您对ng-model感到困惑ngmodel。那么,ngChange期待ng-model期望来自指令的ngmodel值,而是获得您使用的Controller 'ngModel'。所以ng-model错误。

只是为了让你知道ngModel被角度转换为var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; var isFirefox = typeof InstallTrigger !== 'undefined'; var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; var isChrome = !!window.chrome && !isOpera; var isIE = /*@cc_on!@*/false || !!document.documentMode; if(isChrome === false && isSafari === false && isFirefox === false && isOpera === false) {alert('You are in Internet Explorer. Please allow running scripts and ActiveX controls by clicking "Allow Blocked Content" at the bottom of the page upon reload. Otherwise the site may not work correctly.' );};

@jigs回答是对的我只想提供更多信息。