检查控制器哪个输入元素已被修改

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

如果你把输入放在一个带有name属性的表单中，然后给输入一个name属性，你也可以访问输入的$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

这是在控制器中使用 $watch 的最简单示例：

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>