不能在ngRepeat中使用ngChange - Angularjs

时间:2015-01-15 06:55:01

标签: javascript angularjs checkbox angularjs-ng-repeat

我正在使用ngRepeat生成一个复选框的字段集。

我这样做如下:

<fieldset id="country_select" ng-controller="CountriesListController">
        <span ng-repeat="country in countries">
          <label>
            <input type="checkbox" id="country.name" ng-change="locationAdd(country.name)">
            {{country.name}}
          </label><br/>
        </span>
</fieldset>

但是由于某种原因,将ngChange指令添加到我的复选框会导致我的ng-repeat输出只显示一个复选框,如下所示:

复选框 {{country.name}}

当我将ngChange更改为ngClick时,我的ngRepeat循环正常工作。

所以我的问题是:为什么ngChange不适用于ngRepeat,但ngClick插入我的复选框输入时

我在控制台中收到以下错误:

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngChange', can't be found!
http://errors.angularjs.org/1.3.7/$compile/ctreq?p0=ngModel&p1=ngChange
at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:63:12)
at getControllers (http://localhost:9000/bower_components/angular/angular.js:7535:19)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7724:33)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7073:13)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7076:13)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7076:13)
at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:6952:30)
at $get.boundTranscludeFn (http://localhost:9000/bower_components/angular/angular.js:7091:16)
at controllersBoundTransclude (http://localhost:9000/bower_components/angular/angular.js:7747:18)
at ngRepeatAction (http://localhost:9000/bower_components/angular/angular.js:24524:15)angular.js:11592 (anonymous function)angular.js:8542 $getangular.js:14241 $get.Scope.$digestangular.js:14486 $get.Scope.$applyangular.js:9644 doneangular.js:9834 completeRequestangular.js:9775 requestLoaded

2 个答案:

答案 0 :(得分:9)

ng-change将需要ng-model。你错过了复选框上的ng-model

检查此plunker以获取工作示例。

答案 1 :(得分:0)

请注意您打算使用ngChange。在我的情况下,当我打算使用data-ng-change

时,我的手指和眼睛有点太快而且没有选择data-ng-click智能感知

我很确定在输入data-ng-c后我只看到一个条目(data-ng-click);但也许Intellisense显示其他选项有点慢,当我点击[Tab]时按字母顺序选择......