Невозможно запустить отправку в angularJS с помощью одной кнопки

Question

Невозможно запустить отправку в angularJS с помощью одной кнопки

0

Использование ng-submit У меня есть обратный вызов формы, а именно submitFN. Есть 2 кнопки:

Зарабатывайте мой стартап!
Сброс

Мой желаемый результат - нажатие кнопки сброса, поле ввода - 0. И при нажатии "Fund my startUp" появляется предупреждение. Как достичь этого?

Проблема: обе кнопки запускают submitFN. Не удалось выполнить сброс.

Код:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js">


    </script>
    <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller('startUpController', function($scope) {
        $scope.funding = {
          startingEstimate: 0
        };

        $scope.calculate = function () {
          $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };

        $scope.submitFN = function () {
          window.alert('Go and find more customers.')
        }

        $scope.resetFN = function () {
            $scope.startingEstimate = 0;
        }
      });

    </script>
  </head>

  <body>
    <div ng-app='mainApp'>
        <form ng-submit="submitFN()" ng-controller="startUpController">
          Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/>
          Recommended: {{funding.needed}}
          <button>Fund my startup!</button>
          <button ng-click="resetFN()">Reset</button>
        </form>
      </div>
  </body>

</html>

Я совершенно новичок в angularJS, и любая помощь очень заметна. Заранее спасибо.

ОБНОВЛЕНИЕ Один из кодов, который я пробовал:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js">


    </script>
    <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller('startUpController', function($scope) {
        $scope.funding = {
          startingEstimate: 0
        };

        $scope.calculate = function () {
          $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };

        $scope.submitFN = function () {
          window.alert('Go and find more customers.')
        }

        $scope.resetFN = function () {
            $scope.startingEstimate = 0;
        }
      });

    </script>
  </head>

  <body>
    <div ng-app='mainApp'>
        <form ng-submit="submitFN()" ng-controller="startUpController">
          Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/>
          Recommended: {{funding.needed}}
          <button>Fund my startup!</button>
          <button type = "button" ng-click="resetFN()">Reset</button>
        </form>
      </div>
  </body>

</html>

Ayan 26 июль 2016, в 07:16

Источник

Теги:

javascript

html

angularjs

3 ответа

3

скорректированный код ниже:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js">


    </script>
    <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller('startUpController', function($scope) {
        $scope.funding = {
          startingEstimate: 0
        };

        $scope.calculate = function () {
          $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };

        $scope.submitFN = function () {
          window.alert('Go and find more customers.')
        }

        $scope.resetFN = function () {
            $scope.funding.startingEstimate = 0;
        }
      });

    </script>
  </head>

  <body>
    <div ng-app='mainApp'>
        <form ng-submit="submitFN()" ng-controller="startUpController">
          Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/>
          Recommended: {{funding.needed}}
          <button>Fund my startup!</button>
          <button type="button" ng-click="resetFN()">Reset</button>
        </form>
      </div>
  </body>

</html>

kukkuz 26 июль 2016, в 02:15

0

Эй, @kukkuz, ты можешь просто направить то, что я пропустил? Ур код работает нормально.
Ayan 26 июль 2016, в 04:28
1

@Tilov Yrys указал на ошибку ниже ... :)
kukkuz 26 июль 2016, в 04:32

1

Вы пропустите funding

$scope.resetFN = function () {
   $scope.funding.startingEstimate = 0;
}

Tilekbekov Yrysbek 26 июль 2016, в 03:04

Ещё вопросы

Эй, @kukkuz, ты можешь просто направить то, что я пропустил? Ур код работает нормально.

Pankaj Parkar · Accepted Answer · 2016-07-26T02-33-00.000Z

По умолчанию type кнопки отправляется, поэтому у вас вторая кнопка также имеет кнопку типа submit. Если вы не хотите отправлять форму на этой кнопке, вы должны явно ввести эту кнопку в качестве button

type="button"

Также у вас была ошибка в resetFN-коде, он должен изменить значение, которое присваивается ng-model

    $scope.resetFN = function () {
        $scope.funding.startingEstimate = 0;
    }

Привет @pankaj, проверь мой код в обновленном вопросе. Я попробовал то, что ты сказал. Но теперь нажатие на сброс не работает.
Посмотри обновленный ответ пожалуйста