Question

我在angularJs中比较新。我正在使用搜索字段，其中搜索将使用“ng-submit”执行，但ng-submit不起作用。这是我的模板（仅搜索部分）：

<form class="navbar-form navbar-right" ng-submit="search()">
    <input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="term"></input>
</form>

和相关的angularJS

<script>
app.controller("NavCtrl", ['$scope', '$http', '$location', '$q','$timeout', function NavCtrl($scope, $http, $location, $q, $timeout) {
    $scope.results = ["Test"];
    $scope.term = "";
    $scope.reqs = "5";
    $scope.pics = "45";
    $scope.ddata = "asdasd";
    $scope.ddata = $http.post("{% url 'get-nav-info' %}").success(
        function(result){
            //$scope.reqs = result.data.data.num_request;
            //$scope.pics = result.data.data.num_photo;
            return result.data;
        }
    );
    //$scope.reqs = $scope.ddata.num_request;
    //$scope.pics = $scope.ddata.num_photo;


    $scope.search = function(){
        //alert("test");
        //$location.absUrl()
        //$location.path("{% url 'search-term-show' %}?term="+$scope.term).replace();
        $http.get("{% url 'search-term-show' %}?term="+$scope.term).success(function(result){
                return result.data;
        });
    //$scope.$apply();
    }
}]);

</script>

我很确定问题是在angularJs ng-submit部分发生的。但无法正确解决问题。我很确定，因为如果我手动编写搜索网址然后显示结果，但如果我尝试通过按Enter键搜索结果，则搜索没有响应。请帮我解决这个问题。

Answer 1

那里有很多无用的代码，但我创建了一个plunker

http://plnkr.co/edit/uwDrNRLxUBLQdoi2ykez?p=preview

编辑：SORRY发布了错误的链接！

提供了一些建议，也许你忘了将控制器附加到你的html，如ng-controller="navController"

var app = angular.module('myApp', []);

app.controller('navController', ['$scope', '$http', function($scope, $http) {
  
  $scope.search = function() {
      console.log("search")
      $http.get($scope.term).success(function(result) {
         window.console.log("result");
         return result.data;
      });
  
  }
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
    <script src="script.js"></script>
 <body ng-app="myApp">
   <div ng-controller="navController">
      <form ng-submit="search()">
          <input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="term"></input>
          <input type="submit">
      </form>
    </div>
  </body>
<html>

在提交时它会进行搜索，但我不知道那个网址是什么，因为你使用了某种模板mixin，请避免混合模板和Javascript

Answer 2

您是否已将id =“anyName”添加到代码？

如果是这样，它应该起作用

谢谢，萨米尔

Answer 3

您可以尝试使用type =“submit”按钮插入“表单”，然后将其隐藏起来。这个例如：

<button type="submit"
            data-ng-hide="true"
            data-ng-click="save()"/>

Answer 4

以下是index.html：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7" data-require="angular.js@*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div ng-controller="NavCtrl">
  <form ng-submit="search()">
    <input class="col-xs-9" type="text" placeholder="Search" ng-model="term" />
    <input type="submit" ng-submit="search()" />
  </form>
</div>

</body>

</html>

我单独留下原始的get和post请求，除了我更改它以便它将返回一个promise。我无法使原始搜索工作，因为我不确定它想要完成什么。我清理了项目，采用了一些＆＃34;最佳实践＆＃34;，并使角度指令正常工作。这不会使提交问题的人受益，但可能会帮助其他人提出类似的问题。这是脚本文件：

(function(){

var app = angular.module('myApp', []);

app.controller('NavCtrl', NavCtrl);

function NavCtrl($scope, $http, $location) {

$scope.results = ["Test"];
$scope.term = "";
$scope.reqs = "5";
$scope.pics = "45";
$scope.ddata = "asdasd";
$scope.ddata = $http.post("{% url 'get-nav-info' %}").then(
  function(result) {
//  $scope.reqs = result.data.data.num_request;
//   $scope.pics = result.data.data.num_photo;
  return result.data;
});

//$scope.reqs = $scope.ddata.num_request;
//$scope.pics = $scope.ddata.num_photo;

$scope.search = function() {
  alert("search function was called");
  //alert("test");
  $location.absUrl();
  $location.path("{% url 'search-term-show' %}?     term="+$scope.term).replace();
  $http.get("{% url 'search-term-show' %}?term="+$scope.term)
     .then(function(result) {
     //Successful
     console.log(result.data);
  },
  function() {
    //Error
    console.log("Could not locate term.");
  });

return result.data
};

}
})();

Answer 5

如果同样的问题和ngSubmit似乎对对象更好，将你的ng模型转换为foo.term并在控制器中以$ scope.foo.term的形式访问它。

这样可行。

要测试你是否正确绑定，

在输入下方，执行类似{{foo.term}}的操作并查看值更新

angularJs中的ng-submit不起作用

5 个答案: