Question

我正在开发一个新的库管理软件，其中包括spring boot，angular js和MongoDB作为后端。我想在MongoDB上使用该应用程序执行crud操作，为此，我引用了一些开源项目，我可以成功执行创建和读取操作，但不能执行删除和更新操作，所以如何执行我也做了一些更改对于删除更新但不能执行此操作，请告诉我必须执行的更改才能执行删除。我在var columns = element.all(by.repeater("column in columns")); browser.executeScript("arguments[0].scrollIntoView();", columns.last());中将此添加为我自己的，但该元素未删除。为此，我在mybooks.html和mybooks.html中对删除操作进行了一些更改，但该元素未被删除

hello.js

// mybooks.html <h1>Your Current List of Books</h1> <style type="text/css"> table { margin: 10px 0 30px 0; } table tr th, table tr td { background: #555; color: #FFF; padding: 27px 74px; text-align: left; text-shadow: none; } table tr td { background: #DDD; color: #47433F; border-top: 1px solid #FFF; } </style> <table ng-controller="books"> <tr> <th>BooK_id</th> <th>BooK_title</th> <th>BooK_author</th> <th>BooK_year</th> <th>update</th> </tr> <tr ng-repeat="message in controller.messages"> <td>{{message.id}}</td> <td>{{message.title}}</td> <td>{{message.author}}</td> <td>{{message.year}}</td> <td> <input type="button" class="btn btn-default btn-lg" value="Delete" ng-click="remove(message.id)"> </td> </tr> </table>文件

中控制器所做的更改

hello.js

bookrestcontroller.java中的删除更改 - ＆gt;

    /**
 * Created by sezin on 3/22/16.
 */
angular.module('hello', ['ngRoute', 'ngResource', 'ngCookies'])
    .config(function($routeProvider, $httpProvider){
        $routeProvider.when('/', {
            templateUrl : 'home.html',
            controller : 'home',
            controllerAs: 'controller'
        }).when('/login', {
            templateUrl : 'login.html',
            controller : 'navigation',
            controllerAs: 'controller'
        }).when('/register', {
            templateUrl : 'register.html',
            controller : 'register',
            controllerAs: 'controller'
        }).when('/mybooks', {
            templateUrl : 'mybooks.html',
            controller : 'books',
            controllerAs: 'controller'
        }).otherwise('/'); 

        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

    })
    .controller('home', function($http, $cookies) {
        var self = this;
        $http.get('/resource/').success(function(data){
            self.greeting = data;

            self.currentUserName = $cookies.get("username");

            //self.messages = [];
            self.saveBook = function(){
                //var BookRecord = $resource('/account/', {username : self.currentUserName});
                //BookRecord.save(self.book);
                var request = {
                    userName: self.currentUserName,
                    title: self.book.title,
                    author: self.book.author,
                    year: self.book.year
                };
                $http.post('api/books/add', request).success(function(data){

                    if(data){
                        self.success = true;
                    } if(data == null){
                        self.success = false;
                    }
                    console.log(data);
                    //self.messages.push({type:'success', msg: 'Book Saved!'});
                }). error(function(err){
                    console.log(err);
                });
            };






        });


    })
    .controller('books', function($http, $cookies){

        var self = this;
        self.messages = [];
        self.currentUserName = $cookies.get("username");

        $http.get('api/books/getAll/' + self.currentUserName).success(function(data){

            self.messages = data;
            console.log(data);
        });
        //run now 
      self.remove = function(messageId){
          console.log(" messageId :: "+messageId);
          $http.get('api/books/delete/'+messageId).success(function(data){

                // success 
           }). error(function(err){
                // error
           });

       };

    })

    .controller('navigation', function($rootScope, $http, $location, $cookies) {
        var self = this;
        var authenticate = function(credentials, callback) {
            var headers = credentials ? {authorization: "Basic "
            + btoa(credentials.username + ":" + credentials.password)} :{};

            $http.get('/user/', {headers : headers}).success(function(data){
                if(data.name){
                    $rootScope.authenticated = true;
                    $rootScope.username = data.username;
                    if (typeof callback == "function") {
                        callback() && callback();
                    }

                } else{
                    $rootScope.authenticated = false;
                    if (typeof callback == "function") {
                        callback() && callback();
                    }
                }
            })
        };

        authenticate();
        self.credentials = {};
        self.login = function(){
            authenticate(self.credentials, function () {
                if($rootScope.authenticated){
                    $location.path("/");
                    $rootScope.username = self.credentials.username;
                    $cookies.put("username", $rootScope.username);
                    self.error = false;
                } else{
                    $location.path("/login");
                    self.error = true;
                }

            });
        };

        self.logout = function(){
            $http.post('logout', {}).finally(function(){
                $rootScope.authenticated = false;
                $location.path("/");
            });
        }
    })
    .controller('register', function($resource, $rootScope, $location){
        var self = this;
        self.register = function(){
            var User = $resource('/account');
            User.save(self.user, function(data){
                    self.success = data;


            });
        };

    });

Answer 1

假设你的后端工作正常，试试这个

<table ng-controller="books">
    <tr>
        <th>BooK_id</th>
        <th>BooK_title</th>

<th>BooK_author</th>
            <th>BooK_year</th>
            <th>update</th>
        </tr>
        <tr ng-repeat="message in controller.messages">
            <td>{{message.id}}</td>
            <td>{{message.title}}</td>
            <td>{{message.author}}</td>
            <td>{{message.year}}</td>
            <td>
                <input type="button" class="btn btn-default btn-lg" value="Delete" ng-click="remove(message.id)">
            </td>
        </tr>
    </table>

＆＃13;

angular.module("myapp", [])

.controller('books', function($http, $scope){
 
        var self = this;
        self.messages = [];
        self.currentUserName = 'asdasd'
       // Replace this code with your $http get method call
       $scope.messages = [{
             id: '123', title: 'hhh', author: 'asdasd', year: '1988'},{
             id: '456', title: 'fff', author: 'asdasd', year: '1988'},{
             id: '789', title: 'sss', author: 'asdasd', year: '1988'},{
             id: 'asdasd', title: 'asdasd', author: 'asdasd', year: '1988'}];
        //run now 
      $scope.remove = function(messageId){
          // Replace this code with your $http method call
          angular.forEach($scope.messages, function(item, index) {
            if(messageId === item.id) {
              console.log(index);
              $scope.messages.splice(index, 1);
            }
          });

       };

    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h1>Your Current List of Books</h1>
  <style type="text/css">
     table { 
  margin: 10px 0 30px 0;
 }

table tr th, table tr td { 
  background: #555;
  color: #FFF;
  padding: 27px 74px;
  text-align: left;
  text-shadow: none;
}

table tr td { 
  background: #DDD;
  color: #47433F;
  border-top: 1px solid #FFF;
}
</style>
<table ng-app="myapp" ng-controller="books">
   <tr>
     <th>BooK_id</th>
    <th>BooK_title</th>
    <th>BooK_author</th>        
    <th>BooK_year</th>
    <th>update</th>
 </tr>
   <tr ng-repeat="message in messages">
    <td>{{message.id}}</td>
    <td>{{message.title}}</td>
    <td>{{message.author}}</td>     
    <td>{{message.year}}</td>
    <td>
        <input type="button" class="btn btn-default btn-lg" value="Delete" ng-click="remove(message.id)">
    </td>
 </tr>


</table>

＆＃13;

我已经使用静态数据添加了前端代码的工作副本。如果你的后端工作，这应该工作

提示：要使您的应用程序具有RESTful功能，请使用DELETE HTTP谓词执行删除操作：）

Answer 2

您需要查看Angular绑定的工作方式，特别是它们的范围。看起来您正在尝试在实例化控制器之前在ng-repeat道具上创建转发器（messages）。

Angular目前正试图在适用的messages上找到scope并空手而归，因此转发器最终为空。因此，您的输入永远不会被渲染，控制器也不会被初始化。

将ng-controller指令向上移动到table元素，或将while表包含在带控制器的div中。

您可能还希望使用ControllerAs表示法切换到范围控制的更好约定：在容器中使用ng-controller="books as bookCtrl"，在您使用ng-click="bookCtrl.remove(message.id)"的输入上。 / p>

动作不会导致按钮角度js的ng-click

2 个答案: