Действие Angularjs при нажатии кнопки

Я пытаюсь выполнить некоторые вычисления, но это делается, как только я ввожу сумму. Я просто хочу, чтобы это произошло при нажатии кнопки, а не автоматически.Действие Angularjs при нажатии кнопки

То, что я сделал до сих пор:

<!DOCTYPE html> 
<html ng-app="myAppModule"> 
    <head> 
    <title>Angular JS - programming-free.com</title> 
    <link href="https://dl.dropbox.com/u/96099766/DetailModalExample/bootstrap.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="lib/angularjs.min.js"></script> 
    </head> 
    <body> 
    <div ng-controller="myAppController" style="text-align:center"> 
     <p style="font-size:28px;"> 
     Enter Quantity: 
     <input type="text" ng-model="quantity"/> 
     </p> 
     <h2>Total Cost: Rs.{{calculateval(quantity,10)}}</h2> 
    </div> 
    <script type="text/javascript"> 
     var myAppModule = angular.module('myAppModule', []); 
     myAppModule.controller('myAppController', function($scope,calculateService) { 
     $scope.quantity=1; 
     $scope.calculateval = function(xval,yval) {      
      return calculateService.calculate(xval,yval); 
     } 
     }); 
     // Service 
     myAppModule.factory('calculateService', function(){ 
     return { 
      calculate: function(xval,yval){ 
      return xval*yval; 
      } 
     }    
     }); 
    </script> 
    </body> 
</html>

источник

2014-02-11 Abhishek Kumar

Расчет происходит немедленно, так как вызов расчет связан в шаблоне, который отображает его результат, когда quantity изменения.

Вместо этого вы можете попробовать следующий подход. Измените разметку на следующее:

<div ng-controller="myAppController" style="text-align:center"> 
    <p style="font-size:28px;">Enter Quantity: 
     <input type="text" ng-model="quantity"/> 
    </p> 
    <button ng-click="calculateQuantity()">Calculate</button> 
    <h2>Total Cost: Rs.{{quantityResult}}</h2> 
</div>

Далее обновите контроллер:

myAppModule.controller('myAppController', function($scope,calculateService) { 
    $scope.quantity=1; 
    $scope.quantityResult = 0; 

    $scope.calculateQuantity = function() { 
    $scope.quantityResult = calculateService.calculate($scope.quantity, 10); 
    }; 
});

Вот JSBin example, демонстрирующая выше подход.

Проблема с этим подходом - результат вычислений остается видимым со старым значением до нажатия кнопки. Чтобы устранить это, вы можете скрыть результат всякий раз, когда изменяется quantity.

Это потребует обновления шаблона для добавления ng-change на входе, и ng-if на результат:

<input type="text" ng-change="hideQuantityResult()" ng-model="quantity"/>

<h2 ng-if="showQuantityResult">Total Cost: Rs.{{quantityResult}}</h2>

В контроллере добавить:

$scope.showQuantityResult = false; 

$scope.calculateQuantity = function() { 
    $scope.quantityResult = calculateService.calculate($scope.quantity, 10); 
    $scope.showQuantityResult = true; 
}; 

$scope.hideQuantityResult = function() { 
    $scope.showQuantityResult = false; 
};

Эти обновления можно увидеть в этом JSBin demo.

источник

2014-02-11 05:21:58

Tnkyou somuch для быстрого ответа. Еще одна небольшая помощь. если я хочу выполнить одну и ту же задачу для вычисления значения по разным ставкам в табличном формате на основе значения, введенного в одном текстовом поле, скажем, что-то вроде этого http://www.investing.com/forex-tools/fibonacci -calculator –

@AbhishekKumar без проблем. Я предлагаю вам создать новый вопрос и точно объяснить, что вам нужно, поскольку это совсем другой запрос. Отправьте новый вопрос и покажите примеры ожидаемых входов и выходов, а также любой код, который вы попробовали, и кто-то вам поможет. –

Действие Angularjs при нажатии кнопки

ответ

Смежные вопросы