如何使用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？

回答

相关问题