angularjs – ng-change之前的角度下拉确认

发布时间：2020-12-17 16:57:50 所属栏目：安全来源：网络整理

导读：我有一个下拉列表,如果用户不想继续,则需要取消ng-change事件. previousPortfolioId值在$scope中正确设置,但视图仍显示更改的值.我尝试了$scope.$apply也适用,但没有工作.如何取消ng-change事件？ Template.html select style="width:200px;" ng-model="Sele

我有一个下拉列表,如果用户不想继续,则需要取消ng-change事件. previousPortfolioId值在$scope中正确设置,但视图仍显示更改的值.我尝试了$scope.$apply也适用,但没有工作.如何取消ng-change事件？

Template.html

<select style="width:200px;" ng-model="SelectedPortfolioId" ng-change="PortfolioSelectionChange(SelectedPortfolioId)" ng-options="Portfolio.BlendId as Portfolio.BlendName for Portfolio in Portfolios">
</select>

Controller.js

$scope.PortfolioSelectionChange = function (SelectedPortfolioId) {
var previousPortfolioId = $scope.SelectedPortfolioId;
if ($scope.IsPageDirty) {
    var promise = DisplayConfirmation('Your unsaved changes will be lost. Do you want to continue?');
    promise.done(function () {
     // do something 
    });

        promise.fail(function () {
                // cancel the change
            $scope.SelectedPortfolioId = previousPortfolioId;
        });
    }
};

解决方法

首先,您无法取消更改事件.见这里： https://developer.mozilla.org/en-US/docs/Web/Events/change它说它不可取消.但是,您可以阻止更改绑定到窗体控件的模型,然后还原窗体字段值.

您可以使用ng-model-options并将updateOn设置为自定义事件来完成此操作. NG-模型选项= “{updateOn： ‘确认’}”

下面的指令将显示确认消息,如果接受,则使用ngmodelcontroller更新模型.如果确认被拒绝,则表单字段值将设置回模型值中存储的值.

这很好,因为任何针对相同型号值的手表都不会触发.

(function () {
  'use strict';
  angular.module('app.registration')
    .directive('confirm',function ($window) {
      return {
        require: 'ngModel',link: function (scope,el,att,ctrl) {
          var message = att.confirm;
          el.on('change',function (){
            var val = ctrl.$modelValue;

            if (!val || $window.confirm(message)) {
              ctrl.$setViewValue(el.val(),'confirmed');
              ctrl.$$debounceViewValueCommit('confirmed');
            }
            else {
              el.val(val);
            }
          });
        }
      };
    });
})();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!