Question

我只是学习角度并制作了一个表格。提交不起作用。我已按照代码课程的说明进行操作，但仍然无法正常工作。当我按提交时，它实际上没有添加它并且它没有清除我想要它的形式，如果我没有错过指令中的某些内容它应该拥有它需要的一切工作，但我明显遗漏了一些东西..

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 = {};
};
 })



})();

Answer 1

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

Answer 2

（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

Answer 3

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

这是演示 正常工作：

＆＃13;

(function() {
  angular
    .module('ratingStore', [])
    .controller("reviewController", function() {
      this.rate = {};
      this.rating = [];
      
      this.addRate = function() {
        this.rating.push(this.rate);
        this.rate = {};
      }
    });
})();

＆＃13;

<!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>

＆＃13;

Answer 4

你从哪里获得评级论证？我想它只是一个存储所有评级的ng-model 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 >

并且，不要忘记调用放置控制器和模块的功能。

我的角度ng-submit不起作用

4 个答案: