如何使用AngularJS的ng-change？

Question

我在下面的html代码中填充dropdown中的值，如果用户更改dropdown，我想使用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();
      };

Answer 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函数中声明的作用域变量是否已更新，如果需要，请尝试使用监视。

希望这也能对你的参考getting the ng-object selected with ng-change有所帮助

希望它能有所帮助！:)