繁体   English   中英

如何使用AngularJS的ng-change?

How to use ng-change of AngularJS?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在下面的html代码中的下拉列表中填充值,如果用户更改下拉列表,我想使用ng-show并显示文本区域,以便用户可以输入注释,我如何使用AngualrJS指令ng-change来实现。

到目前为止很累...

的HTML

<form kendo-validator="ratingValidator" name="processRatingForm"
    novalidate ng-cloak ng-controller="EditProcessRatingCtrl"
    class="border-box-sizing grids-fonts">
    <p class="status">{{PrcsratingValidationMsg}}</p>

    <div class="row">
        <div class="form-group col-md-6" ng-show="showEditdisForm">
            <div>
                <label class="control-label" for="controlEffBusiness">Overall
                    Control Effectiveness Business</label>
            </div>
            <div>
                <select kendo-drop-down-list k-data-value-field="'id'"
                    k-data-text-field="'text'" k-option-label="'Select'"
                    k-data-source="ctrlEffOptions"
                    ng-model-options="{ updateOn: 'blur' }"
                    ng-model="processRating.controlEffectivenessRatingOverrideKey" ng-change="overrideBusinessDec()"></select>
            </div>
        </div>
    </div>
    <div class="row" ng-show="OverrideComments">
        <div class="form-group col-md-6">
                <label class="control-label" for="controlEffBusiness">
            Overall Control Effectiveness Business Comments</label>
        </div>
        <div class="col-md-10" kendo-validator="overrideCommentValidator">
            <textarea rows="2" class="form-control" required
                data-required-msg="Business override justification is required"
                ng-model="processRating.overallControlEffectivenessOverrideText"></textarea>
        </div>
    </div>

CTRL.JS

 $scope.riskDirOptions = kendoCustomDataSource.getDropDownDataSource("RSDL_RSK_DIR");
    $scope.riskBusinessOptions = kendoCustomDataSource.getDropDownDataSource("RSDL_RR");
    $scope.ctrlEffOptions = kendoCustomDataSource.getDropDownDataSource("CTL_EFCTVNS_RT");
        $scope.disableEffComp = true;
        $scope.compReadOnly = true;
        //Edit Function broadcast from parent Ctrl
        $scope.$on('editProcessRating', function() {
         $scope.showEditdisForm = true;
        $scope.ProcessRatingWin.open().center();
        if($scope.processRating.inherentRiskRatingKey === null || $scope.processRating.finalOutcomeInherentRiskRatingKey === null 
            || $scope.processRating.controlEffectivenessRatingComputeKey === null) {
              $scope.showEditdisForm = false;
              $scope.PrcsratingValidationMsg = '*All Computed values are required*';
          } else {
            return true;
          }
      });
       //Edit Save Functionality
      $scope.saveProcessRating = function() {
        Rating.saveProcessRating($scope.processRating).then(function(){
          $rootScope.$broadcast("refreshRatingGrid");
          $scope.ProcessRatingWin.close();
        });
      }

      $scope.overrideBusinessDec = function() {

        if (!($scope.processRating.controlEffectivenessRatingOverrideKey !==null)) {
            $scope.OverrideComments = true;

        } else {
            $scope.OverrideComments = false;
        }

    };

      $scope.closeModal = function() {
        $scope.ProcessRatingWin.close();
      };
1 个回复

不确定您想要什么。 但这是ng-change的简单实现

这是HTML

<select  data-ng-model="valueSelected" 
          ng-options="opt as opt.label for opt in options" ng-change="handleChange()">
    </select> 

这是.js文件

    app.controller('settingsCtrl',function($scope) { 

      $scope.handleChange = function(){
        console.log(valueSelected);
      }
   });

每当下拉列表发生更改时,都会执行scope.handleChange。

在您的HTML中,尝试使用“ ng-if”代替“ ng-show”。

我不确定在ng-change函数中声明的作用域变量是否已更新,如果需要,请尝试使用监视。

希望这也能为您提供参考, 使用ng-change选择ng-object

希望能帮助到你 ! :)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题
 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM