简体   繁体   English

角度js ng-submit不起作用

[英]angular js ng-submit not working

I'm currently stuck on submitting form. 我目前无法提交表单。 I assume my ng-submit not working. 我认为我的ng提交无法正常工作。 I've trying to run in chrome nothing works, while in firefox it works. 我试图在chrome中运行,但是在Firefox中却无法运行。 Seems getting confused Here's my code: 似乎很困惑这是我的代码:

//controller //控制器

app.controller("HomeController",["$scope","suggestions",function($scope,suggestions){
$scope.posts = suggestions.posts;

$scope.addSuggestion = function(){
  //if input empty
  if(!$scope.title || $scope.title === ""){
    alert("wrong");
  }

  //push suggestions
  $scope.posts.push({
    title: $scope.title,
    upvotes: 0

  });

  //after submit, clear input
  $scope.title = "";
};
}]);

//html // HTML

<body ng-app="SuggestionBox" ng-controller="HomeController">
<h1 class="text-center">Suggestion Box</h1>
<section id="main">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="well" ng-repeat="post in posts | orderBy:'-upvotes'">
          <h3>{{post.title}}</h3>
          <button type="button" class="btn btn-warning"><i class="fa fa-star"></i> {{ post.upvotes }}</button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <form ng-submit="addSuggestion()">
          <h3 class="text-center">Submit Your Suggestion</h3>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Great Ideas Here" ng-model="title"/>
          </div>
          <button type="submit" class="btn btn-primary">Suggest</button>
        </form>
      </div>
    </div>
  </div>
</section>
try this..

<button type="submit" class="btn btn-primary">Suggest</button>
//change this line-
<input type="submit" class="btn btn-primary" name="" id="" value="Suggest" />

hope it works.
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
    angular.module('SuggestionBox', []).controller("HomeController", ["$scope", function($scope) {
        $scope.posts = [];

        $scope.addSuggestion = function() {
            //if input empty
            if (!$scope.title || $scope.title === "") {
                alert("wrong");
            }

            //push suggestions
            $scope.posts.push({
                title: $scope.title,
                upvotes: 0

            });

            //after submit, clear input
            $scope.title = "";
        };
    }]);
</script>
</head>

<body ng-app="SuggestionBox" ng-controller="HomeController">
<h1 class="text-center">Suggestion Box</h1>
<section id="main">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="well" ng-repeat="post in posts | orderBy:'-upvotes'">
                    <h3>{{post.title}}</h3>
                    <button type="button" class="btn btn-warning"><i class="fa fa-star"></i> {{ post.upvotes }}</button>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form ng-submit="addSuggestion()">
                    <h3 class="text-center">Submit Your Suggestion</h3>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Great Ideas Here" ng-model="title" />
                    </div>
                    <button type="submit" class="btn btn-primary">Suggest</button>
                </form>
            </div>
        </div>
    </div>
</section>
</body>

</html>

This code is working as per your requirement. 该代码根据您的要求运行。 suggestions 建议

app.controller("HomeController",["$scope","suggestions",function($scope,suggestions){

The dependency suggestions was creating problem for you. 依赖性建议正在为您带来问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM