angular js ng-submit not working

时间:2017-02-18 06:24:28

标签: angularjs

我目前仍然坚持提交表格。我认为我的ng-submit不起作用。我试图在chrome中运行没有任何作用,而在Firefox中它可行。似乎很困惑 这是我的代码:

//控制器

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

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

2 个答案:

答案 0 :(得分:0)

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.

答案 1 :(得分:0)

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

此代码符合您的要求。建议

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

依赖建议正在为您创造问题。