檢查控制器哪個輸入元素已被修改

Question

我需要檢查哪個輸入元素已經以更新形式修改過。

<form name="utilizationForm" role="form" novalidate> 
    <div class="row" data-ng-repeat="i in [1,2,3,4]"> 
      <div class="col-md-3"> 
       <div asterick class="form-group" ng-class="{'form-group has-success': !error['resource_type'] && (submitted), 'form-group has-error': (error['resource_type']) && (submitted)}"> 
        <label for="resourceType">Resource Type</label> 
        <input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value=""> 
             <select name="resourceType" id="resourceType" ng-model="data['resource_type' + i]" class="form-control" ng-required="true" > 
              <option ng-repeat="option in resourceTypeJson" value="{{option}}">{{option}}</option> 
             </select> 
        <span class="er-block" ng-show="utilizationForm.resourceType.$touched && utilizationForm.resourceType.$error.required">Please provide Resource type.</span> 
        <span ng-show="error.resource_type1" class="er-block">{{error.resource_type1}}</span> 
       </div>  
      </div> 
      <div class="col-md-3"> 
       <label for="efforts">Efforts (in hours)</label> 
       <input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value=""> 
       <input type="text" test-change name="efforts" id="efforts" class="form-control" ng-model="data['efforts' + i]" value=""> 
      </div> 
     </div> 
     <div class="text-right" ng-class="{'col-md-6 mt25': showCompletion}"> 
      <button class="btn btn-primary" ng-disabled="utilizationForm.$invalid" ng-click="addUtilizationReport()">{{buttonText}}</button> 
     </div> 

    </form> 

現在，當我點擊更新按鈕，我需要檢查哪一個輸入元素更新形式已經修改控制器。請幫忙。

Answer 1

如果您將輸入放在名稱屬性的表單中，然後爲輸入指定名稱屬性，則還可以訪問輸入的$dirty屬性。

<div ng-controller="MyController"> 
    <form name="myForm"> 
    <input type="text" name="first" ng-model="firstName"> 
    <input type="text" name="last" ng-model="lastName"> 
    </form> 
</div> 

app.controller('MyController', function($scope) { 
    // Here you have access to the inputs' `$dirty` property 
    console.log($scope.myForm.first.$dirty); 
    console.log($scope.myForm.last.$dirty); 
}); 

您可以使用$scope.myForm.$dirty來看看是否有任何領域都變了，看到$dirty屬性窗體上的每個輸入的特性如果輸入已改變。你甚至可以遍歷myForm對象（非輸入字段對象有一個$前綴鍵）：

angular.forEach($scope.myForm, function(value, key) { 
    if(key[0] == '$') return; 
    console.log(key, value.$dirty) 
}); 

Answer 2

這裏是在控制器使用$表的最簡單的例子：

var app = angular.module('myApp', []); 
 
app.controller('appCtrl', function($scope, $location) { 
 
    $scope.$watch('abc', function(newVal,oldVal) { 
 
     if(oldVal != newVal){ 
 
     alert("value changed!"); 
 
     }  
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div ng-app="myApp" ng-controller="appCtrl"> 
 
<input type="text" name="first" ng-model="abc"> 
 
</div>