Angularjs 如何将更新的字段值传递到函数（内联编辑和更新）_Angularjs

Angularjs 如何将更新的字段值传递到函数（内联编辑和更新）

angularjs

Angularjs 如何将更新的字段值传递到函数（内联编辑和更新）,angularjs,Angularjs,我正在进行内联编辑和更新。 Edit和Cancel功能工作正常。但是在更新时，我无法将更新的字段值传递到update功能中，它在控制台中显示未定义的。日志这里有什么问题 <body ng-app="intranet_App"> <table class="table table-hover table-bordered" id="mydata" ng-controller="myCtrl"> <thead class="colorBlue">

我正在进行内联编辑和更新。

Edit

和

Cancel

功能工作正常。但是在更新时，我无法将更新的字段值传递到

update

功能中，它在

控制台中显示未定义的。日志
这里有什么问题
<body ng-app="intranet_App">
  <table class="table table-hover table-bordered" id="mydata" ng-controller="myCtrl">
    <thead class="colorBlue">
      <tr>
        <th>S.No</th>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody id="">
      <tr ng-repeat="x in roleList | filter:searchText" ng-model="x.Id">
        <td>{{x.Id}}</td>
        <td>
          <span ng-hide="editMode">{{x.name}}</span>
          <input type="text" ng-show="editMode" ng-model="x.name" />
        </td>
        <td>
          <i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="editMode = true;edit(x.Id)" ng-hide="editMode"></i>
          <i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-hide="true" ng-show="editMode" ng-click="update(x.name);editMode = false"></i>
          <i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="editMode = false" ng-hide="true" ng-show="editMode"></i>
        </td>
      </tr>
    </tbody>
  </table>
</body>
<script>
  var app = angular
    .module("intranet_App", [])
    .controller('myCtrl', function($scope, $http) {
      $scope.updateItem = [];
      $scope.updatedList = function(val) {
        $scope.updateItem.push(val);
        $scope.json = angular.toJson($scope.val);

      }
      $http.post("/Admin/getRolesList")
        .then(function(response) {
          $scope.roleList = response.data;
        });
      //$scope.edit=function(val){
      //    $scope.editing = $scope.items.indexOf(val);
      //}
      $scope.update = function(val) {
        console.log(val)
        $scope.updatedList(val);
        var requestHeaders = {
          "Content-type": 'application/json'
        }
        var httpRequest = {
          method: 'post',
          url: '/Admin/RoleUpdate',
          headers: requestHeaders
        };
        httpRequest.data = $scope.json;
        $http(httpRequest).then(function(response) {
          alert("success")
        })
      }
      $scope.cancel = function(val) {
      }
    })
</script>


美国号
名称
行动
{{x.Id}
{{x.name}
var app=角度
.模块（“intranet_应用程序”，[]）
.controller（'myCtrl'，函数（$scope，$http）{
$scope.updateItem=[]；
$scope.updatedList=函数（val）{
$scope.updateItem.push（val）；
$scope.json=angular.toJson（$scope.val）；
}
$http.post（“/Admin/getRolesList”）
.然后（功能（响应）{
$scope.roleList=response.data；
});
//$scope.edit=函数（val）{
//$scope.editing=$scope.items.indexOf（val）；
//}
$scope.update=函数（val）{
console.log（val）
$scope.updatedList（val）；
var requestHeaders={
“内容类型”：“应用程序/json”
}
var httpRequest={
方法：“post”，
url:“/Admin/RoleUpdate”，
标题：请求标题
};
httpRequest.data=$scope.json；
$http（httpRequest）.then（函数（响应）{
警惕（“成功”）
})
}
$scope.cancel=函数（val）{
}
})
在更新列表函数中
，您使用了$scope.val
，但它应该是val

由于您是从函数参数访问val
，它将不在范围内，因此$scope.val
将是未定义的
更改angular.toJson（$scope.val）
toangular.toJson（val）
应该是,
$scope.updatedList = function (val) {
    $scope.updateItem.push(val);
    $scope.json = angular.toJson(val);
    console.log($scope.json)
}

根据需要更新：
$scope.updatedList = function (val) {
   $scope.updateItem.push(val);
   $scope.json = angular.toJson(val);
   if($scope.json)
    {
      $scope.json = { "name": $scope.json }   
    }
    console.log($scope.json)
}

在您的更新列表函数中，在$scope.json=angular.toJson（$scope.val）中使用$scope.val；并且没有$scope.val。将其更改为$scope.json=angular.toJson（val）；只，它应该在更新函数本身中不起作用，因为它是未定义的
如何用这样一个键发送它…{“name”：“john”}
你想这样发送到数据库吗？在后端，它是这样发送的“\”john\\
…为什么你要再次将json
发送到一个对象中。你可以，$scope.json={“name”：val}
$scope.updatedList = function (val) {
   $scope.updateItem.push(val);
   $scope.json = angular.toJson(val);
   if($scope.json)
    {
      $scope.json = { "name": $scope.json }   
    }
    console.log($scope.json)
}