Question

我是angularjs的新手，我想在模式上绑定编辑数据然后提交。

我的controller.js

       .controller("registration_listCtrl", ["$scope", "$http", function 
       ($scope, $http) {                

            $scope.editlist = function(id){
                $http({
                    method:'post',
                    url:'http://localhost/Angular_demo/admin/index.php/welcome/get_edit_data/'+ id
                }).then(function success(response){
                     $scope.sid = parseInt(response['id']);
                    $scope.firstname = response["first_name"];
                    $scope.lastname = response['last_name'];
                    $scope.email = response['email'];
                });
            }
      $scope.getUsers();
      }])

当我单击表格中的编辑按钮时，数据将在控制台上返回，但不会绑定到我的模态中。我的返回数据是 0： {id：“ 1”，first_name：“ dipti”，last_name：“ ranjan”，电子邮件：“ uiouio@ytry.yuy”，密码：“ 12345”}

但是当我在控制台中打印response [“ first_name”]时，它显示为未定义

Answer 1

这是针对您问题的最佳做法：

<!doctype html>
<html ng-app="crudapp">
<head>
<meta charset="UTF-8">
<title>AngularJS and CRUD</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>

<body ng-controller="registration_listCtrl">

    <!-- Table to output data -->
    <table cellpadding="5" cellspacing="0" border="1">
    <thead>
            <tr>
                <th>AngularJS ID</th>
                <th>SKU CODE</th>
                <th>PRODUCT</th>
                <th>PRICE</th>
                <th>QUANTITY</th>
                <th>OPTIONS</th>
            </tr>
    </thead>
    <tbody>
            <tr ng-repeat="product in listProducts">
                <td>{{product.id = $index}}</td>
                <td>{{product.sku}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price}}</td>
                <td>{{product.quantity}}</td>
                <td>
                    <a href="#" ng-click="del(product.id)">DELETE</a>
                    <a href="#" ng-click="selectEdit(product.id)">EDIT</a>
                </td>
            </tr>
    </tbody>
    </table>

    <h1>Product Information</h1>

    <form name="commentForm" method="post">
    <table cellpadding="5" cellspacing="5">
        <tr>
            <td>SKU</td>
            <td>
                <input type="text" ng-model="sku">
            </td>
        </tr>
        <tr>
            <td>Product Name</td>
            <td>
                <input type="text" ng-model="name">
            </td>
        </tr>
        <tr>
            <td>Price</td>
            <td>
                <input type="text" ng-model="price">
            </td>
        </tr>
        <tr>
            <td>Quantity</td>
            <td>
                <input type="text" ng-model="quantity">
            </td>
        </tr>
        <tr>
            <td> </td>
            <td>
                <input type="button" value="Add" ng-click="add()">
                <input type="button" value="Save" ng-click="edit()">
            </td>
        </tr>
    </table>
    </form>

    <script type="text/javascript">

     
        var crudapp = angular.module('crudapp', []);

    
        crudapp.controller('registration_listCtrl', function($scope){

            <!-- Populate table with products data -->
            $scope.listProducts = [
                {sku:'SKU1', name:'Product Name 1', price:199, quantity: 50},
                {sku:'SKU2', name:'Product Name 2', price:220, quantity: 100},
                {sku:'SKU3', name:'Product Name 3', price:55, quantity: 25},
                {sku:'SKU4', name:'Product Name 4', price:100, quantity: 50},
                {sku:'SKU5', name:'Product Name 5', price:10, quantity: 1000}
            ];

            <!-- Delete function -->
            $scope.del = function(id){
                var result = confirm('Are you sure?');
                if (result===true){ 
                    var index = getSelectedIndex(id);
                    $scope.listProducts.splice(index, 1);
                };
            };

            <!-- Edit and update row function -->
            $scope.edit = function(){
                var index = getSelectedIndex($scope.id);
                $scope.listProducts[index].sku = $scope.sku;
                $scope.listProducts[index].name = $scope.name;
                $scope.listProducts[index].price = $scope.price;
                $scope.listProducts[index].quantity = $scope.quantity;
            };

            <!-- Select the row of data and update the form function -->
            $scope.selectEdit = function(id){
                var index = getSelectedIndex(id);
                var product = $scope.listProducts[index];
                $scope.id = product.id;
                $scope.sku = product.sku;
                $scope.name = product.name;
                $scope.price = product.price;
                $scope.quantity = product.quantity;
            };

            <!-- Add a new product function -->
            $scope.add = function(id){
                $scope.listProducts.push({
                    sku:$scope.sku, 
                    name:$scope.name, 
                    price:$scope.price, 
                    quantity:$scope.quantity    
                });
                <!-- Resets the form -->
                $scope.sku = '';
                $scope.name = '';
                $scope.price = '';
                $scope.quantity = '';
            };

            <!-- Function finds unique product data based on its id -->
            function getSelectedIndex(id){
                for(var i=0; i<$scope.listProducts.length; i++)
                    if($scope.listProducts[i].id==id)
                        return i;
                    return -1;  
            };

        });
    </script>

</body>
</html>

使用angularjs在模态上绑定编辑数据

1 个答案: