Question

我的代码有什么问题？它运作不正常

我的.html页面看起来像我是一名初级编码员，编码如下：

<!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <meta charset="ISO-8859-1">
    <title>Index</title>
    <script type="text/javascript" src="/scripts/angular.js"></script>
        <script type="text/javascript">
        alert("in script");
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope , $http) {
            refreshData();

            function refreshData(){
                alert("function called");
                $http({
                    alert("get all countries");
                    method: 'GET',
                    url:'http://localhost:8081/SpringWithAngularJs/rest/countries.json'
                        }).success(function(data)
                            {

                            $scope.posts = data;

                            });
            }
            $scope.form = {
                    countryName : "pp",
                    population : "1000"
                        };
            $scope.add=function(){
                $http({
                    alert("add countries");
                    method: 'POST',
                    url:'http://localhost:8081/SpringWithAngularJs/rest/countries/create/'+$scope.form.countryName+'/'+$scope.form.population
                    }).success(function(data){
                        alert("Country Added");
                        refreshData();
                        });
                }
            $scope.remove=function(data){
                $http({
                    alert("delete countries");
                    method: 'DELETE',
                    url:'http://localhost:8081/SpringWithAngularJs/rest/countries/delete/'+data
                    }).success(function(data){
                        alert('Country Deleted');
                        refreshData();
                        });
            }
        });
        </script>
        </head>
    <body ng-controller="myCtrl">
    <h1>Country List</h1>
        <table border="">
            <thead>
                <tr>
                    <th>Country Id</th>
                    <th>Country Name</th>
                    <th>Country Population</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tr ng-repeat="c in posts">
                <td>{{c.countryId}}</td>
                <td>{{c.countryName}}</td>
                <td>{{c.population}}</td>
                <td><button ng-click="remove{$index}">Remove</button></td>
            </tr>
        </table>

        <h1>Add Country</h1>
        <table>
            <tr>
                <td>Country Name:</td>
                <td><input type="text" ng-model="form.countryName"/></td>
            </tr>

            <tr>
                <td>Country Population:</td>
                <td><input type="text" ng-model="form.population"/></td>
            </tr>

            <tr>
                <td><button type="submit" ng-click="add()">Add</button></td>
            </tr>

        </table>

    </body>
    </html>

我的控制器看起来像：当运行html页面甚至没有javascript的警报功能正在工作。为什么会这样？

package com.cg.springwithangularjs.controllers;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.cg.springwithangularjs.dtos.Country;
import com.cg.springwithangularjs.exceptions.CountryException;
import com.cg.springwithangularjs.services.CountryService;

@RestController
public class CountryFrontController {
    @Autowired
    CountryService countryService;

    @RequestMapping(value="/countries",method=RequestMethod.GET,headers="Accept=application/json")
    public List<Country> getallCountries(Model model){
        System.out.println("in function");
        try {
            return countryService.getAllCountries();
        } catch (CountryException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return null;
    }

    @RequestMapping(value="/countries/create/{name}/{popu}",method=RequestMethod.POST,headers="Accept=application/json")
    public List<Country> addCountry(@PathVariable String name , @PathVariable String popu){
        Country country = new Country();
        country.setCountryName(name);
        country.setPopulation(popu);

        try {
            countryService.addCountry(country);
            return countryService.getAllCountries();
        } catch (CountryException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        return null;
    }

    @RequestMapping(value="/countries/delete/{id}",method=RequestMethod.DELETE,headers="Accept=application/json")
    public List<Country> deleteCountry(@PathVariable String id){
        try {
            countryService.delete(id);
            return countryService.getAllCountries();
        } catch (CountryException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return null;
    }
}

Answer 1

从三个$ http服务中的配置对象中删除alert（），使它们看起来像 $http({method: 'GET', url: '/someUrl'}).success ...

还可以尝试从以下位置更改删除函数调用：

<td><button ng-click="remove{$index}">Remove</button></td>

为：

<td><button ng-click="remove($index)">Remove</button></td>

以下angularjs代码有什么问题

1 个答案: