如何从angularjs中的表中删除单个字段

时间:2017-01-04 06:23:10

标签: php mysql angularjs

我的问题是,当我试图从表中删除单个字段时,整个字段都在删除..在执行此操作后,当我尝试添加用户时,我的保存按钮无法正常工作,请帮我解决..TIA。     我的代码看起来像:

            <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        </head>
        <body ng-app="TestApp" ng-controller="testController">
        <h1>Simple Example with Angular List with crude features</h1>
          <table class="table table-striped table-bordered">
            <thead>
              <tr><th>Sr</th><th>Name</th><th>Age</th><th>Action</th></tr>
            </thead>
            <tbody>
              <tr ng-repeat="user in userList track by $index">
                <td>{{$index + 1}}</td>
                <td>
                  {{user.Name}}
                </td>
                <td>{{user.Age}}</td>
                                        <td><div class="btn-group">
                        <button type="button" class="btn btn-default btn" ng-click="edit($index);"><i class="glyphicon glyphicon-pencil"></i></button>
                        <button type="button" class="btn btn-default btn" ng-click="delete();"><i class="glyphicon glyphicon-trash"></i></button>
                        </div></td>
              </tr>
            </tbody>
          </table>
          <div class="">
          <form class="form-horizontal">
           <div class="form-group col-sm-4">
            <label for="name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
              <input type="test" class="form-control" id="name" placeholder="Name" ng-model="userObject.Name"/>
            </div>
          </div>
          <div class="form-group col-sm-4">
            <label for="age" class="col-sm-2 control-label">Age</label>
            <div class="col-sm-10">
              <input type="test" class="form-control" id="age" placeholder="Age" ng-model="userObject.Age"/>
            </div>
          </div>
           <input type="hidden" ng-model="$scope.objectIndex" class="ng-valid">
          <div class="btn-group col-sm-2">
                        <button type="button" class="btn btn-primary btn" ng-click="save()"><i class="glyphicon glyphicon glyphicon-ok-circle"></i>Save</button>
                        </div>
        </form>
        </div>
        </body>
        </html>
        <script>
        angular.module('TestApp', ['TestApp.controllers']);

                        angular.module('TestApp.controllers', []).controller('testController', function($scope) {
                                        $scope.objectIndex = '';
                                        $scope.userList = [
                                                          {

                                                                          Name: 'Parvez Alam',
                                                                          Age: '28'
                                                          },

                                                         {
                                                                        Name: 'Sameer',
                                                                        Age: '13'
                                                          },
                                                          {
                                                                        Name: 'Rakesh',
                                                                        Age: '55'
                                                          },
                                                          {
                                                                        Name: 'Ramesh',
                                                                        Age: '44'
                                                          },
                                                          {
                                                                        Name: 'Aman',
                                                                        Age: '34'
                                                          },
                                                          {
                                                                        Name: 'John',
                                                                        Age: '23'
                                                          }
                                          ];

                                         $scope.edit = function(id) {
                                        //search user and update it
                                            $scope.objectIndex = id;
                                                        $scope.userObject = angular.copy($scope.userList[id]);
                                                        console.log($scope.objectIndex);
                                        }

                                        $scope.save = function() {
                                                        console.log($scope.objectIndex);
                                                        if($scope.userList[$scope.objectIndex] == null) {
                                                                        //if this is new record, add it in users array
                                                                        $scope.userList.push($scope.userObject);
                                                        } else {
                                                                        //for existing record, find this record using id
                                                                        //and update it.
                                                                                        $scope.userList[$scope.objectIndex] = $scope.userObject;
                                                        }

                                                        //clear the add record form
                                                        $scope.userObject = {};
                                                        $scope.objectIndex = '';
                                        }

                                        $scope.delete = function(id) {
                                                        //search record with given id and delete it
                                                        for(i in $scope.userList) {
                                                                        if($scope.userList[i].id == id) {
                                                                                        $scope.userList.splice(i,1);
                                                                                        $scope.userList = {};
                                                                        }
                                                        }

                                        }
                        });
        </script>

0 个答案:

没有答案