如何使用AngularJS的ng-change？

Question

I am populating values in dropdown in below html code , if user change dropdown i want to use ng-show and display text area so user can enter comments , How i can achieve that using AngualrJS directive ng-change.

So far tired this...

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

Not exactly sure what you want. But this is a simple implementation of ng-change

Here is the HTML

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

Here is the .js file

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

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

The scope.handleChange will be executed every time there is a change in the dropdown.

and In your HTML try using 'ng-if' in place of 'ng-show'.

I am not sure if the scope variables you declared in the ng-change function are updated try to use a watch if needed.

Hope this will also help for your reference getting the ng-object selected with ng-change

hope it helps ! :)