如何使用ng-change AngularJS？

我在下面的HTML代碼中填充下拉列表中的值，如果用戶更改下拉列表，我想使用ng-show和顯示文本區域，以便用戶可以輸入註釋，我如何使用AngualrJS指令ng-change來實現這一點。如何使用ng-change AngularJS？

到目前爲止厭倦了這個...

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(); 
     };

來源

2015-03-30 aftab

HTML蝙蝠俠的聖牆... 請減少你發佈的代碼，只是什麼是相關的。 – 2015-03-30 20:46:50

編輯併發布更新問題 – aftab 2015-03-30 20:51:04

哇。 angularjs是醜陋的是不是 – iamwhitebox 2015-03-30 21:28:50

不清楚自己想要什麼。但是，這是一個簡單的實現NG-變化

這裏是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

希望它能幫助！ :)

來源

2015-03-30 21:37:39 Chait

當用戶在下拉菜單中更改當前填充的值時，事件ng-change =「overrideBusinessDec（）」並使用ng-show =「OverrideComments」顯示文本區域 – aftab 2015-03-30 21:46:05

如何使用ng-change AngularJS？

回答

相關問題