如何使用AngularJS的ng-change？

Question

我正在下面的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();
      };

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函數中聲明的作用域變量是否已更新，如果需要，請嘗試使用監視。

希望這也能為您提供參考， 讓您使用ng-change選擇ng-object

希望能幫助到你 ！ :)