使用控制器对输入进行ng-change作为语法不起作用

时间:2016-10-21 15:26:11

标签: javascript html angularjs angularjs-ng-change

我使用$ watch来触发输入或选择标签的更改。一切都工作正常,但想要重构,而不是观察者使用ng-change指令。对于select标签是有效的,但对于输入类型它现在正在工作,函数不会被调用。

输入视图

<div>
    <input date-range-picker  type="text" ng-model="reviewvm.review.extDate" 
    ng-change="reviewvm.changed(reviewvm.review.extDate)" 
options="{locale:{format: 'MM/DD/YYYY'}, singleDatePicker:true}" />
    <span data-ng-click="reviewvm.openExitConfDatePicker()">
        <i class="icon-calendar"></i>
    </span>
</div>

选择视图

<select ng-change="reviewvm.agencyChanged(reviewvm.agency)" 
data-ng-model="reviewvm.agency" data-ng-options="agency as agency.agencyName for agency in reviewvm.refAgencies track by agency.id"">
    <option value="">Select {{reviewvm.area}} Department or Agency</option>
</select>

功能

reviewvm.changed = changed;

function changed(current, original) {
    console.log(current + " - " + original);
}

function agencyChanged(current, original) { 
    console.log(current + " - " + original);
}

正如我所说的选择和输入的方法相同,但是对于输入它不会在函数内部改变....

Plunker

https://plnkr.co/edit/STyQT4SivGuAdzy5ADGl?p=preview

更新

<div data-ng-class="{'not-allowed input-group' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group' : reviewvm.userReviewAssoc}" data-ng-show="reviewvm.review.actualStartDt">
                        <input id="extConfDate" class="form-control date-picker" date-range-picker data-ng-disabled="!reviewvm.userReviewAssoc || !reviewvm.editMode" type="text"
                               ng-model="reviewvm.review.exitConfDt" ng-change="reviewvm.exitConfChanged(reviewvm.review.exitConfDt)"
                               min="reviewvm.review.actualStartDt" max="reviewvm.currDate" placeholder="mm/dd/yyyy" options="{locale:{format: 'MM/DD/YYYY'}, singleDatePicker:true}" />
                        <span data-ng-class="{'not-allowed input-group-addon' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group-addon' : reviewvm.userReviewAssoc}" data-ng-click="reviewvm.openExitConfDatePicker()">
                            <i class="icon-calendar"></i></span>
                    </div>


function exitConfChanged(current, original) {
            console.log(current)
        }

这就是我如何使用当前和原始的下拉列表工作:

ng-change="reviewvm.reviewTypeChanged(reviewvm.review.reviewType, '{{reviewvm.review.reviewType}}')"

然后在控制器中:

function reviewTypeChanged(original, current) {
   if (original !== "") {
                original = angular.fromJson(original);
   }
console.log(original + " - " + current);
}

这适用于所有下拉列表我正在获取当前和之前的选项,但输入不是......

我认为也许它不会进入angular-daterangepicker的这个错误的函数内部:

TypeError: Cannot read property 'startDate' of null
    at Array.<anonymous> (angular-daterangepicker.js:93)
    at Object.ngModelWatch (angular.js:23555)
    at Scope.$digest (angular.js:14404)
    at Scope.$apply (angular.js:14675)
    at done (angular.js:9725)
    at completeRequest (angular.js:9915)
    at XMLHttpRequest.requestLoaded (angular.js:9856)(anonymous function) @ angular.js:11706(anonymous function) @ angular.js:8619$digest @ angular.js:14430$apply @ angular.js:14675done @ angular.js:9725completeRequest @ angular.js:9915requestLoaded @ angular.js:9856

但不知道如何修复它因为我在互联网上搜索很多人都有同样的错误但仍无法解决...

1 个答案:

答案 0 :(得分:1)

你不应该在ng-change表达式中使用{{}}

ng-change="reviewvm.agencyChanged(reviewvm.agency, (reviewvm.agencye || 'null'))"

仍然想知道将'null'作为字符串的任何特殊原因吗?