簡體   English   中英

ng-change與控制器輸入,因為語法不起作用

[英]ng-change on input with controller as syntax not working

我正在使用$ watch觸發輸入或選擇標簽的更改。 一切工作正常,但希望進行重構,以代替觀察者使用ng-change指令。 對於選擇標簽有效,但對於輸入類型,它現在有效,未調用函數。

輸入視圖

<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);
}

正如我說的,選擇和輸入的方法相同,但是對於輸入,它不會進入功能已更改的內部。

柱塞

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

但不知道如何解決,因為我在互聯網上搜索時,許多人都遇到相同的錯誤,但仍然無法解決...

您不應該在ng-change表達式中使用{{}}

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

還在想將“ null”作為字符串的任何特殊原因嗎?

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM