我的角度无法从HTML页面获取值

时间:2019-04-24 07:20:12

标签: javascript angularjs rest spring-boot thymeleaf

我有一个函数调用我的休息服务,但无法从html文件中获取值。当我按提交$ scope.productForm时,尽管我的html页面中仍然有值。

Main.js

$scope.products = [];
$scope.productForm = {
    ID:1,
    Name:"",
    Description:"",
    URL:""
};

_refreshProductData();

//Add or Update Product
$scope.submitProduct = function() {  
    var method = "";
     
    if ($scope.productForm.ID == -1) {
        method = "POST";
    } else {
        method = "PUT";
    }
     
    $http({ 
        method: method,
        url: '/product',
        data: angular.toJson($scope.productForm),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(_success, _error);
 }

index.html

<form ng-submit="submitProduct()">
    <table border="0">
        <tr>
            <td>ProductID</td>
            <td>{{productForm.ID}}</td>
        </tr>
        <tr>
            <td>Product Name</td>
            <td><input type="text" ng-model="productForm.Name" /></td>
        </tr>
        <tr>
            <td>Product Description</td>
            <td><input type="text" ng-model="productForm.Description"  /></td>
        </tr>
	    <tr>
            <td>Product URL</td>
            <td><input type="text" ng-model="productForm.URL"  /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Submit" class="blue-button" />
            </td>
        </tr>
    </table>
</form>

数据:angular.toJson($ scope.productForm)可以具有index.html中的值

2 个答案:

答案 0 :(得分:0)

$scope._refreshProductData();-->  you should call your function this way.
_refreshProductData();-->_refreshProductData is not defined(F12)

我假设该函数是在上一个答案中创建的。

1)create your function in main.js
   $scope._refreshProductData() = function()
   {
     write codes here...  
   }

然后调用该函数

2) $scope._refreshProductData();

答案 1 :(得分:0)

就像其他人所说的那样,您有很多事情需要解决。

  1. main.js没有定义的功能_refreshProductData。我假设这破坏了您的脚本,以及为什么$scope.submitProduct()无法执行。
  2. 在定义_refreshProductData函数时,需要将其附加到控制器的$scope(即$scope._refreshProductData = function(){//refresh data},如果希望HTML模板可以访问它的话),否则,不需要附加$scope。您需要根据采用的方法来更新对此函数的调用。