どの入力要素が変更されたかをコントローラにチェックしてください

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>