Я новичок в AngularJS. Я создал простой сценарий для начала обучения, но по какой-то причине следующий код не работает:

var app = angular.module("myModule", []).controller("myController", function($scope) {
    $scope.addIneger = function (a, b) {
        alert();
        $scope.output= a + b;
    }
});

И вот мой html-код:

<html>
<head>
  <Script src="javascript/angular.js"> </Script>
  <Script src="javascript/script.js"> </Script>
  <title>Insert title here</title>
</head>
<body ng-app="myModule">
  <table ng-cntroller="myController">
    <th>
      <td><input type="text" ng-model="a"/></td>
      <td><input type="text" ng-model="b"/></td>
    </th>
    <th>
        <td><input type="text" ng-model="output"/></td>
    </th>
    <th>
      <td>
        <button type="button" ng-click="addIneger(a,b)" />
      </td>
   </th>
 </table>

Как видите, 2 текстовых поля получают числа, и после нажатия кнопки должен быть показан результат.

Кто-нибудь может помочь?

1
Hamed Minaee 23 Фев 2016 в 06:44

3 ответа

Лучший ответ

Вы допустили синтаксическую ошибку / опечатку:

<table ng-cntroller="myController">

Измените это на:

<table ng-controller="myController">

В остальном то, что вы делаете, работает отлично, за исключением того факта, что вы добавляете не числа, а строки, потому что вы используете type="text" на своем input:

<input type="text" ng-model="a" />
<input type="text" ng-model="b" />

Поэтому, когда вы их складываете, они объединяют два значения "2" + "3" = "23". Вам нужно будет изменить ввод на type="number":

 <input type="number" ng-model="a" /><br>
 <input type="number" ng-model="b" /><br>

Или преобразуйте свои значения в числа в своем методе:

$scope.addInteger = function (a, b) {
    $scope.output= new Number(a) + new Number(b);
}

// or

$scope.addInteger = function (a, b) {
    $scope.output= parseInt(a) + new parseInt(b);
}

Отлично работает:

angular.module('App', []);

angular.module('App').controller('Controller', [
             '$scope',
    function ($scope) {
        $scope.addInteger = function (a, b) {
            $scope.output= a + b;
        }
    }
]);
<!DOCTYPE html>
<html ng-app="App">
    <head>
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    </head>
    <body ng-controller="Controller">
        <input type="number" ng-model="a" /><br>
        <input type="number" ng-model="b" /><br>
        <button type="button" ng-click="addInteger(a,b)">
            Add integer
        </button><br>
        <input type="text" ng-model="output" /><br>
    </body>
</html>
3
iH8 23 Фев 2016 в 04:09

Вы можете изменить код, как показано ниже. Проблема должна заключаться в том, что при вызове addIng (a, b) он не отправляет значения a и b.

var app=angular.module("myModule",[]).controller("myController", function($scope){
    $scope.addIneger=function(){
    alert();
    $scope.output= $scope.a+$scope.b;
    }
    });

<html>
<head>
 <Script src="javascript/angular.js"> </Script>
 <Script src="javascript/script.js"> </Script>
 <title>Insert title here</title>
</head>
<body ng-app="myModule">
<table ng-cntroller="myController">
<th>
     <td><input type="text" ng-model="a"/></td>
    <td><input type="text" ng-model="b"/></td>
     </th>
    <th>
        <td><input type="text" ng-model="output"/></td>
    </th>
        <th>
     <td>

      <button type="button" ng-click="addIneger()" />

     </td>
   </th>
  </table>
    </body>
     </html>
0
user2326210user2326210 23 Фев 2016 в 03:50

Попробуйте использовать следующий код:

$scope.output = parseInt(a) + parseInt(b);
0
Maccath 24 Фев 2016 в 09:32