在 Angular js 的编辑案例中未获取文本更改值

Question

HTML代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
 <body>  
           <br /><br />  
           <div class="container" style="width:500px;">  
                <h3 align="center">Registration Form</h3>  
                <div ng-app="myapp" ng-controller="usercontroller">  
                  <input type="hidden" ng-value="id" name="id" ng-model="id" class="form-control" />  
                     <label>First Name</label>  
                     <input type="text" ng-value="name"  name="first_name" ng-model="firstname" class="form-control" />  

                     <br />  
                     <label>Last Name</label>  
                     <input type="text" ng-value="lname" name="last_name" ng-model="lastname" class="form-control" />  
                     <br />  
                     <input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="ADD"/>  


           <hr>
           <p style="text-align: center;">User List</p>
           <hr> 
           <table class="table table-striped">
            <tr >
                <td>S.no</td>
                <td>First Name</td>
                <td>Last Name</td>
                <td style="text-align: center;" ng-click=>Action</td>
            </tr>
            <tr ng-repeat="x in names">
                <td>{{$index +1}}</td>
                <td>{{x.first_name}}</td>
                <td>{{x.last_name}}</td>
              <td><a href="" ng-click="Delete(x.id)">Delete</a></td>
              <td><a href="" ng-click="Edit(x.id)">Edit</a></td>
            </tr>
           </table>
           </div> 
            </div> 
      </body>  
 </html>

脚本代码：

<script>  
 var app = angular.module("myapp",[]);  
 app.controller("usercontroller", function($scope, $http){ 
  $scope.id=0;
  $scope.Edit=function(id){

            $http.post(  
                "<?php echo BASE_URL;?>Registration/Edit",  
                {id :id}  
           ).then(function(response){

           $scope.name = response.data.first_name;
           $scope.lname = response.data.last_name;
           $scope.id = response.data.id;

           });

           } 
  $scope.Delete=function(id){
            $http.post(  
                "<?php echo BASE_URL;?>Registration/Del",  
                {id :id}  
           ).then(function(response){
            name();
            //alert('ok');

           });

           } 
      $scope.insertData = function(){  
         if($scope.id==0){
           $http.post(  
                "<?php echo BASE_URL;?>Registration/add",  
                {'firstname':$scope.firstname, 'lastname':$scope.lastname}  
           ).then(function(response){
            name();

                $scope.firstname = null;  
                $scope.lastname = null;  
           }); 
           } 
           else{
//Here i am not getting the change value from the text box it give me the same value or old value from the text field
            alert($scope.name);

           }
      }
      var name=function(){
        $http.get("<?php echo BASE_URL;?>Registration/view").then(function(response){
                $scope.names = response.data;
            });
           }
           name();

       });  

 </script>

这是我的 angular crud 所有列表的前端页面，添加，删除工作正常但问题是当我要使用编辑功能在文本字段上设置值时我怎么能得到文本更改后的值返回我修改此值后仅设置文本值我无法获得新值请帮助我解决这个问题我是新手。

Answer 1

1) 您删除 HTML

中所有输入的 ng-value

2) 在$scope.edit方法中，将响应数据附加到模型$scope.firstname、$scope.lastname和$scope.id

这两个更改应该可以解决您的问题。 Angular 机型支持双向绑定。

在 Angular js 的编辑案例中未获取文本更改值

Not getting text change value in edit case in Angular js

angularjs

angularjs-directive

angular-ui-router