通过AngularJS中的表行获取所有脏表单字段

Question

我有一个使用AngularJS在HTML表格中呈现的表单，类似于：

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <form name="inputData" id="inputData" ng-submit="submit()">
      <table class="table">
        <tr>
          <th>Name</th>
          <th>Employees</th>
          <th>Head Office</th>
        </tr>
        <tr ng-repeat="company in companies">
          <td>
            <input type="text" ng-model="company.name" />
          </td>
          <td>
            <input type="text" ng-model="company.employees" />
          </td>
          <td>
            <input type="text" ng-model="company.headoffice" />
          </td>
        </tr>
      </table>
      <input type="submit"/>
    </form>
  </div>
</div>

用户可以编辑表单中的值。提交表单时，我想获得已编辑的行的$index。这样我就可以通过$scope.companies[$index]从模型访问整行（它将被发送到服务器）。

我知道我可以查看$dirty属性的各个字段。但有没有办法可以检索行号？或者更好的是，我可以检索已编辑行中的所有字段吗？

这是一个小提琴，现在，我只是使用CSS突出显示脏字段：https://jsfiddle.net/jmg157/kzxeL0yw/2/

感谢您的帮助！

Answer 1

你可以尝试这样的事情（使用 angular.equals ）：

＆＃13;

＆＃13;

var app = angular.module("myApp", []);

app.controller("MyCtrl", ["$scope", function($scope) {
  $scope.companies = [{
    name: "Infosys Technologies",
    employees: 125000,
    headoffice: "Bangalore"
  }, {
    name: "Cognizant Technologies",
    employees: 100000,
    headoffice: "Bangalore"
  }, {
    name: "Wipro",
    employees: 115000,
    headoffice: "Bangalore"
  }];
  
  $scope.orginalCompanies = angular.copy($scope.companies);
  
  $scope.submit = function() {
  $scope.changedIndex = [];
  	if(angular.equals($scope.orginalCompanies, $scope.companies)){
      console.log('NOthing is changed');
    }else{
      angular.forEach($scope.companies, function(value, key) {
            if(!angular.equals(value, $scope.orginalCompanies[key])){
          $scope.changedIndex.push(key);
        }
      });
      console.log("changed Index:=>");
      console.log($scope.changedIndex);
    }
  }
  
}]);

＆＃13;

input.ng-dirty {
  background-color: #ff0000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <form name="inputData" id="inputData" ng-submit="submit()">
      <table class="table">
        <tr>
          <th>Name
          </th>
          <th>Employees
          </th>
          <th>Head Office
          </th>
        </tr>
        <tr ng-repeat="company in companies">
          <td>
            <input type="text" ng-model="company.name" />
          </td>
          <td>
            <input type="text" ng-model="company.employees" />
          </td>
          <td>
            <input type="text" ng-model="company.headoffice" />
          </td>
        </tr>
      </table>
      <input type="submit"/>
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需使用ng-change指令：

＆＃13;

＆＃13;

angular.module("myApp", []).controller("MyCtrl", ["$scope", function($scope) {
  $scope.companies = [{
    name: "Infosys Technologies",
    employees: 125000,
    headoffice: "Bangalore"
  }, {
    name: "Cognizant Technologies",
    employees: 100000,
    headoffice: "Bangalore"
  }, {
    name: "Wipro",
    employees: 115000,
    headoffice: "Bangalore"
  }];

  $scope.submit = function() {
    console.log($scope.inputData);
  }

  $scope.logs = [];
  $scope.logDirty = function(key, $index) {
    var message = 'company[' + $index + '].' + key + 'is dirty';
    if ($scope.logs.indexOf(message) == -1)
      $scope.logs.push(message);
  }

}]);

＆＃13;

input.ng-dirty {
  background-color: #ff0000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <form name="inputData" id="inputData" ng-submit="submit()">
      <table class="table">
        <tr>
          <th>Name
          </th>
          <th>Employees
          </th>
          <th>Head Office
          </th>
        </tr>
        <tr ng-repeat="company in companies" ng-init='parentIndex=$index'>
          <td ng-repeat='(key, val) in company'>
            <input ng-change='logDirty(key, parentIndex)' type="text" ng-model="company[key]" />
          </td>
        </tr>
      </table>
      <input type="submit" />
      <ul ng-if='logs.length > 0'>
        <li ng-repeat='log in logs'>{{log}}</li>
      </ul>
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;