我的棱角分明的ng提交没有'不起作用

My angular ng-submit doesn't work

本文关键字：不起作用 提交 ng 我的      更新时间：2023-09-26

我只是在学习angular，已经制作了一个表单。但是提交不起作用。我遵循了代码学校课程的指示，但仍然不起作用。当我按下提交按钮时，它实际上并没有添加它，也没有清除我想要的表格，如果我没有从说明中遗漏什么，它应该有它工作所需的一切，但我显然遗漏了一些东西。。

HTML

<form name="rateForm" ng-contoller="reviewController as reviewCtrl" ng-submit="reviewCtrl.addRate(rating)">
    <blockquote>
        <b>Film name: {{reviewCtrl.rate.name}}</b>
        <b>Stars: {{reviewCtrl.rate.price}}</b>
    </blockquote>
    <input type="type" class="film" ng-model="reviewCtrl.rate.name"></input>
    <select ng-model="reviewCtrl.rate.price">
        <option value="1">1 star</option>
        <option value="2">2 star</option>
        <option value="3">3 star</option>
        <option value="4">4 star</option>
        <option value="5">5 star</option>
    </select>
   <input type="submit" value="Submit"/>
</form >

JS-

(function() {
 var app = angular.module('ratingStore', []);

app.contoller("reviewController", function(){
this.rate = {};
this.addRate = function(rating){
    rating.rate.push(this.rate)
    this.rate = {};
};
 })

})();

将ng提交函数调用从提交按钮替换为表单标记。请检查控制器的拼写。

好吧，您不需要注入$scope或其他任何东西。问题只有一个：您在视图和JS中都编写了CONTOLLER而不是CONTROLLER

这是一个演示工作:

(function() {
  angular
    .module('ratingStore', [])
    .controller("reviewController", function() {
      this.rate = {};
      this.rating = [];
      
      this.addRate = function() {
        this.rating.push(this.rate);
        this.rate = {};
      }
    });
})();
<!DOCTYPE html>
<html ng-app="ratingStore">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="reviewController as reviewCtrl">
  <form name="rateForm" ng-submit="reviewCtrl.addRate()">
    <blockquote>
      <b>Film name: {{reviewCtrl.rate.name}}</b>
      <b>Stars: {{reviewCtrl.rate.price}}</b>
    </blockquote>
    <input type="type" class="film" ng-model="reviewCtrl.rate.name">
    <select ng-model="reviewCtrl.rate.price">
      <option value="1">1 star</option>
      <option value="2">2 star</option>
      <option value="3">3 star</option>
      <option value="4">4 star</option>
      <option value="5">5 star</option>
    </select>
    <input type="submit" value="Submit" />
  </form>
  <hr> Rating array:
  <pre ng-bind="reviewCtrl.rating | json"></pre>
</body>
</html>

（i）如'user286852'所述，您需要在表单中添加ng-submit，否则，请为submit函数添加一个按钮，并在ng-click事件中调用它。

（ii）您需要为要存储的评级定义$scope变量。

   $scope.rate = {};
   $scope.rating = [];
   $scope.rating.rate = [];
   $scope.addRate = function() {
   $scope.rating.rate.push($scope.rate)
   console.log($scope.rating.rate);
   $scope.rate = {};
  };

这是正在工作的Rating App

您从哪里获得评级参数？我想它只是一个存储所有评级的ng模型var，所以我将它作为参数，并将其用作$scope的一部分。如果我错了，就修复这个部分。现在，你不能用加法函数作为控制方法，而不是用它作为$scope的方法吗？喜欢：JS:

var app = angular.module('ratingStore', []);
app.contoller("reviewController", function($scope){
    $scope.rate = {};
    $scope.addRate = function(){
        $scope.rating.rate.push($scope.rate)
        $scope.rate = {};
    };
}

HTML:

<form name="rateForm" ng-contoller="reviewController" ng-submit="addRate()">
    <blockquote>
        <b>Film name: {{rate.name}}</b>
        <b>Stars: {{rate.price}}</b>
    </blockquote>
    <input type="type" class="film" ng-model="rate.name"></input>
    <select ng-model="rate.price">
        <option value="1">1 star</option>
        <option value="2">2 star</option>
        <option value="3">3 star</option>
        <option value="4">4 star</option>
        <option value="5">5 star</option>
    </select>
   <input type="submit" value="Submit"/>
</form >

而且，不要忘记调用放置控制器和模块的函数。

相关文章：