如何更改 td 中文本框的值并使用 Angular js 在 db 中存储更改的值答案

【问题标题】：How to change values of textboxes inside td and storing changed values in db using Angular js如何更改 td 中文本框的值并使用 Angular js 在 db 中存储更改的值
【发布时间】：2018-03-24 01:17:47
【问题描述】：

我在文本框的 td 中有一些值。我想做的是当我更改（ng-blur）文本框值时，它应该同时影响其他值，并且更改的值应该发送到控制器以进行数据库操作.我该怎么做？

HTML

<td><input type="text" id="outUser" name="outUser" ng-model="dailyAttendance.outUser"  ng-init="dailyAttendance.outUser | formatTime" ng-blur="dailyAttendances.sendData(dailyAttendance.outUser)"></td>
<td>{{ dailyAttendance.lateUser | formatTime}}</td>
<td>{{ dailyAttendance.workedUser | formatTime}}</td>
<td>{{ dailyAttendance.OTUser | formatTime}}</td>

角度js

sendData(){
    this.success = false;
    this.submitted = true;
    if(this.$scope.DailyAttendanceForm.$valid) {
        this.errors = {};
        var that = this;

        this.spinnerBar.show(); // hide spinner bar
        this.$http.post(this.urls.BASE + '/outTime', this.entity)

        .success(
        function (response) {
            that.success = true;
            that.message = response.data;
            that.spinnerBar.hide(); // hide spinner bar
        })

        .error(
        function (status) {
            that.spinnerBar.hide(); // hide spinner bar
            var i=0;                          
        });
    }
    else{
        this.success = false;
    }
}

例如，当我更改“outUser”值时，它需要在 lateUser 和 workingUser 字段上显示相同的值

【问题讨论】：

或者您可以放置一个按钮，并通过使用 ng-click 指令对其进行标记来调用 dailyAttendances.sendData(dailyAttendance.outUser) 函数。这将仅在您需要时更新数据。

标签： javascript jquery html angularjs laravel

【解决方案1】：

将您的请求发送到数据库并收到响应后，您应该在控制器中附加属性（lateUser、workedUser、..）并分配新值

<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <table>
  <tr>
      <td><input type="text" id="outUser" name="outUser" ng-model="outUser" ng-blur="sendData()"></td>
      <td>{{lateUser}}</td>
      <td>{{workedUser}}</td>
      <td>{{OTUser}}</td>
  </tr>
  </table>
</div>

angular.module("myApp",[]).controller("MyCtrl", function($scope) {

$scope.sendData = function(){

        /**
            do same job
    **/

    /**
      attach attributes to the current scope and assign new values
    **/
      $scope.lateUser = $scope.outUser + "lateUser"
    $scope.workedUser = $scope.outUser + "workedUser"
    $scope.OTUser = $scope.outUser + "OTUser"
}

});

Full exemple

【讨论】：